css-shapes

This is the CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } How does it produce the circle below? Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this: After applying border-radius 30 pixels it would appear like this: The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases. So, how does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels? How does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180

I know it's possible to create a hexagon shape using the following code: .hex:before { content: " "; width: 0; height: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; position: absolute; top: -30px; } .hex { margin-top: 30px; width: 104px; height: 60px; background-color: #6C6; position: relative; } .hex:after { content: ""; width: 0; position: absolute; bottom: -30px; border-top: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; } How can I create a hexagon that's filled with one color, and

I'm looking to create a responsive trapezoid shape which can be in either CSS, SVG or Canvas. I have been able to create the triangle shape but not a trapezoid shape that is responsive. div { width: 0; height: 0; border-top: 5vw solid transparent; border-left: 10vw solid red; border-bottom: 5vw solid transparent; } <div></div> I have seen there are many questions on SO already that encompass a trapezoid shape but very little have reasons why they are better than other methods and also a large majority aren't responsive. As an example, these questions don't require responsiveness and therefore

This question already has an answer here: Shape with a slanted side (responsive) 3 answers I want to create two divs which are floated left to each other, however with a slanted angled border separating them. I've attached a picture to demonstrate what I mean. Does anyone know if something like this is possible with CSS (cutting off the content with an overflow:hidden I guess) These divs need to contain images that get cut off by the border, here is an example : Try this .left, .right { position: relative; height: 100px; width: 200px; background: #000; float: left; } .left:after { content: '';

I know you can make a circle in CSS3 using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS? Ana Yes, you can get such slices of custom angles using either one of the following two methods: If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month. If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menu I did a