Are there more CSS forms?

Question

I keep finding sites talking about CSS-Shapes; where the idea is that instead of a rectangle, I can use CSS to create texts that take several shapes, such as circular ones. But the sites that I find have codes that do not work. And then, when I look at their own source code (since they have examples on their website), it turns out that all the examples that they have are images - unlike real code. So I ask here. Is this CSS-Shape real yet? I want to make text inside a semicircle. This is how I learn about CSS-Shapes.

Answer 1

Yes and no. Real CSS forms are not yet supported by a wide range of browsers.

See http://caniuse.com/#feat=css-shapes

But a circle can also be created by adding rounded corners to an element that is supported by all major browsers, including IE9.

See: http://caniuse.com/#feat=border-radius

Therefore, if you do not need to work in IE8, you can add text to the circle in pure CSS. And for IE8, the text will render just as well, only in a square or rectangle instead of a circle, so this may be acceptable to you.

You will not name a specific website, but quite often articles on web development websites will publish articles on new features that may not be supported (or not widely), and therefore they may have images to show what it will look like. as soon as it becomes available.

As Neath Dark Absolute notes in the comments, the border-radius solution does not actually wrap text around. The text will behave as if the element is still rectangular. If you want the text to fit the shape of a circle and need support for the current generation of browsers, you will need JavaScript help. the TextMorph library seems to do the trick. I was just looking for him, so I have no experience with him, but he looks simple.

Answer 2

To create a semicircle, you can create a <div> element and create it with a border radius, something like this:

 #semicircle { width: 200px; height: 100px; border-radius: 100px 100px 0 0; background: green; } 

Then, if you want to put some text in it, you can simply insert a <span> into it, so the HTML will look like this:

 <div id="semicircle"> <span>Some text</span> </div> 

and then create the text to place it wherever you want inside the parent <div> .