How to create this kind of shape using CSS3?

HTML & CSS
1

Hi guys,

i am wondering how to create this kind of shape using CSS only. I have looked up on the internet but didn’t find the kind of shape i am looking for. Can somebody help me out how to create this shape using CSS3 and place the content inside of it?

Thanks!

See picture:
http://s11.postimg.org/hfrsprrmr/Screen_Shot_2015_02_06_at_23_57_21.png

2

Is there any reason for you to not use an image? What happens if you get the perfect shape and then a user decides that his font isn’t quite big or small enough and changes it? It’ll distort the perfect circle by making it too tall.

3

Hi Ryan,

I understand picture is good, but how can i create it that way that the font will not fall outside the the IMAGE as background?

4

You can’t. Especially with that much text. The shape will be distorted at some screen size. If you do go this route, it will be very flimsy. Again, I’m not sure why you don’t just use an image. Universally supported and more stable.

I mean I guess you could give a scrollbar if text tries to escape but c’mon…

5

Thanks for this topic anway… i hope SHAPES will be perfect in the future with pure HTML/CSS i will place it as an image.

6

try this page. scroll down to starburst

am sure with quite a bit of work you could do it. (if this guy can do this http://codepen.io/natewiley/pen/yyXpVm) i think your sigil is duable.
but probab not worth all the trouble.
D

7

There’s a different between a static shape and a dynamic shape (shape with content in it.) The CSS Tricks link only focuses on shapes, not allowing for content.

The game changes once you add content in it.

That’s a cool codepen though. Without the JS though it’s rather simple.

8

I just took his 12 point burst and modified it to allow content (enough to overflow it) and it just spilled out. Not usable at all besides having fun.

9

yes. the content would complicate things.
i think if you really REALLY wanted to you could use some code to change the content to fit.
either eliminate words and shorten the message or make the text so small eventually it’d be ridiculous.
So yeah…more of a fun thing. But i’d just use the image instead.

10

You can definitely do this with CSS3, but it’s messy. There days, the hotness is to do it with SVG, which can even include the text (which can also be accessible to screen readers etc.).

2 Likes
11

i’d like to see an example that!

12

As Ralph said svg could scale this nicely but for simplicity I would just an image and the results will be pretty good (or good enough for purpose).

Here’s an example.
http://www.pmob.co.uk/temp/star-shape.html

3 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.