使用CSS绘制12点突发。 [英] Drawing a 12 Point Burst ❋ using CSS

问题描述

在这个网页中，按照CSS绘制12点连字符，如何将一些文字里面它（在当前形式它不显示文本内文本，我测试z索引没有成功）？

In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?

如何以最干净的方式绘制12个边框？

How can I draw a 12 burst border in it most clean manner?

#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);
}

推荐答案

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

然后，您可以按照自己想要的方式设置：

Then you can style it the way you want:

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

你会发现一个非常基本的例子此处。

You'll find a very basic example here.

这篇关于使用CSS绘制12点突发。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！