I found this example on stackoverflow: Draw Circle using css alone Which is great. But I’d like to know how to modify that example so that I can include text in the middle of the circle? I also found this: Vertically and horizontally centering text in circle in CSS (like iphone notification badge) but for … Read more
I’m wondering if there’s an easier way to create circular divs than what I’m doing now. Currently, I am just making an image for each different size, but it’s annoying to do this. Is there anyway using CSS to make divs which are circular and I can specify the radius? 15 Answers 15
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 … Read more
How do I create a shape like this to display on a webpage? I don’t want to use images since they would get blurry on scaling I tried with CSS: .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class=”tear”> </div> That … Read more
I want to have a web page which has one centered word. I want this word to be drawn with an animation, such that the page “writes” the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is … Read more
I would like to surround a number in a circle like in this image: Is this possible and how is it achieved? 20 Answers 20
How do I create a menu which looks like so: Link to PSD I don’t want to use the PSD images. I would prefer using icons from some package like FontAwesome and have the backgrounds/css generated in CSS. A version of the menu that is using the PSD to to generate images of the tooltip … Read more
There’re plenty of different CSS shapes over at CSS Tricks – Shapes of CSS and I’m particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id=”triangle-up”></div> How and why does it work? 2 22 CSS Triangles: A Tragedy in … Read more
