SVG This is also possible using SVG. The SVG version is very short as it mainly only requires an Arc command to control its shape, size and position. <svg width=”50%” viewbox=”0 0 100 50″> <path d=”M50,35 a20,20 0 1,0 0,-20 a20,20 0 1,0 0,20z” fill=”white” stroke=”black”> </path> </svg> SVG stands for Scalable Vector Graphic. The … Read more
Can’t you just set left to 50% and then have margin-left set to -25px to account for it’s width: http://jsfiddle.net/9AbYc/ .hero:after { content:”; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } or if you needed a variable width … Read more
Solution that automatically scales to dimensions of an element would be usage of CSS3 linear-gradient connected with calc() as shown below. (There were some issues with Chrome in times of v30+ versions that this answer originally described but looks like they got resolved in the meantime and in v90+ it works as expected). .crossed { … Read more
CSS and Multiple Background Gradients Rather than trying to draw the green portion, you could draw the white portions instead: pie { border-radius: 50%; background-color: green; } .ten { background-image: /* 10% = 126deg = 90 + ( 360 * .1 ) */ linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } pie … Read more
You can achieve a transparent cut out circle with 2 different techniques : 1.SVG The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands : With … Read more
You can do it using linear-gradient .circle{ position:absolute; width:80px; height:80px; border-radius:50%; background: linear-gradient( to right, yellow 0%, yellow 10%, orange 10%, orange 20%, yellow 20%, yellow 30%, orange 30%, orange 40%, yellow 40%, yellow 50%, orange 50%, orange 60%, yellow 60%, yellow 70%, orange 70%, orange 80%, yellow 80%, yellow 90%, orange 90%, orange 100% … Read more
You can make a line on both sides of the title with 2 pseudo elements and borders: This works over a transparent background (lines and title have transparent backgrounds). The line length will adapt to the title width so they alway start and end at the same position regardless to title length. The title can … Read more
As this is quite old now, I feel it could use with some new updated answers with some new technologies. CSS Transform Perspective .trapezoid { width: 200px; height: 200px; background: red; transform: perspective(10px) rotateX(1deg); margin: 50px; } <div class=”trapezoid”></div> SVG <svg viewBox=”0 0 20 20″ width=”20%”> <path d=”M3,0 L17,0 L20,20 L0,20z” fill=”red” /> </svg> Canvas … Read more
There is a neat trick using pure css that i stumbled upon: #square { width: 100%; height: 0; padding-bottom: 100%; } http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/
Update: CSS3 Radial Background Gradient Option (For those browsers supporting it–tested in FF and Chrome–IE10, Safari should work too). One “problem” with my original answer is those situations where one does not have a solid background that they are working against. This update creates the same effect allowing for a transparent “gap” between the circle … Read more