Clever Geek Handbook

Drawing a 12-point splash ❋ using CSS

On this page after CSS, to draw a 12 point splash, how can I put some text in it (in the current form, it doesn't display text within text, I'm testing z-index with no success)?

How can I draw a 12x border in it in the cleanest way?

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}
+2


source to share


1 answer


All you need is to insert another element inside the package container:

<div id="burst-12"><span>I am the text</span></div>

Then you can customize the style however you want:



#burst-12 span {
 display:block;
 position:absolute;
 z-index:2;
}

You will find a very simple example here.

+4


source






More articles:


All Articles