css - 使用 CSS 绘制 12 点突发 ❋

Question

在这个页面中，按照 CSS 绘制 12 点突发，我怎样才能在其中放置一些文本（在当前形式下，它不会在文本中显示文本，我测试 z-index 没有成功）？

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

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

Answer 1

您只需要在突发容器中嵌套另一个元素：

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

然后你可以按照你想要的方式来设计它：

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

您将在此处找到一个非常基本的示例。