Instead of using a triangle hack, you can just rotate a div using transform and get a real box-shadow. Since you only want the shadow on one side of the div (the visible triangle side), you have to make the blur smaller and lower the opacity. Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/ HTML: <div class=”bubble”></div> CSS: .bubble{ background-color: #F2F2F2; … Read more
I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline: <div style=”background-image: url(image.gif)”></div> div { background-repeat: no-repeat; background-position: 50%; border-radius: 50%; width: 100px; height: 100px; } Fiddle
My best attempt: http://dabblet.com/gist/4592062 Pixel perfection at any size, uses simpler math than Ana’s original solution, and is more intuitive in my opinion 🙂 .triangle { position: relative; background-color: orange; text-align: left; } .triangle:before, .triangle:after { content: ”; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { width: 10em; height: 10em; border-top-right-radius: 30%; } .triangle … Read more
You want an entity known as a cross mark: http://www.fileformat.info/info/unicode/char/274c/index.htm The code for it is ❌ and it displays like ❌ If you want a perfectly centered cross mark, like this: try the following CSS: div { height: 100px; width: 100px; background-color: #FA6900; border-radius: 5px; position: relative; } div:after { position: absolute; top: 0; bottom: … Read more
Here are four different versions to supplement @misterManSam’s brilliant answer. 1. With Easing Explanation If you filled up a circular bowl full of liquid, it would fill faster at the bottom and top than it would in the middle (because there is more area to cover in the wider middle section). So, with that crude … Read more
SVG Here you go @Professor.CSS. @jbutler483 A Circle And Polygon svg { background-color: red; } <svg width=”100px” height=”200px” viewBox=”0 0 100 150″> <circle fill=”white” stroke=”black” cx=”50″ cy=”75″ r=”50″></circle> <polygon stroke=”gray” fill=”yellow” points=”100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0″ /> </svg> or css Its just ::before and ::after elements on the lighting. … Read more
Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced. Better is to set line-height equal to font-size (or slightly smaller) and use … Read more
Strictly speaking, any “3D” shape on a flat screen is more an illusion of a 3D object. All we see is a 2D projection of that shape on the screen plane, and our brain does its best to guess which shape could give the projection we see. If the projection changes, our brain interprets it … Read more
Here’s my SVG-only version. The background colour wheel isn’t perfect, but I think I got fairly close. <svg width=”135″ height=”135″ viewBox=”0 0 200 200″> <defs> <filter id=”blur” color-interpolation-filters=”linear”> <feGaussianBlur in=”SourceGraphic” stdDeviation=”11″/> </filter> <mask id=”mask”> <circle cx=”0″ cy=”0″ r=”90″ fill=”white”/> </mask> <linearGradient id=”gloss” x2=”0″ y2=”0.4″> <stop offset=”0″ stop-color=”white” stop-opacity=”0.5″/> <stop offset=”1″ stop-color=”white” stop-opacity=”0″/> </linearGradient> </defs> <g … Read more
http://jsfiddle.net/MafjT/ You can use this css span { display: block; height: 60px; width: 60px; line-height: 60px; -moz-border-radius: 30px; /* or 50% */ border-radius: 30px; /* or 50% */ background-color: black; color: white; text-align: center; font-size: 2em; } Because you want a circle, you need to set the same value to width, height and line-height (to … Read more