html - 功能区和星星 - 如何在没有图像文件的情况下完成这项工作？

Question

我需要在没有图像文件的情况下创建此功能区和星星外观（附图像）。我知道如何把星星放进去，但我需要像附上图像的丝带边。如果没有图像文件，只有纯 CSS 和 HTML，我怎么能做到这一点？我认为边界半径需要在这里进行操作。

这是我到目前为止所拥有的，这太可怕了。

我怎样才能border-radius得到这个效果？

Answer 1

我建议将 CSS 三角形与伪元素:before和:after功能区的边三角形结合起来，将 html 字符 ★ 用于星星：

工作的jsFiddle

HTML：

<h1>&#9733; KRISTINE COADY &#9733;</h1> <!-- &#9733; is html star character -->

CSS：

h1{ /* all regular attributes here */
    background:#A52927;
    display:inline-block;
    padding:0px 30px;
    color:#EEE4D3;
    position:relative;
    height:40px;
    line-height:40px;
}

h1:before{ /* this will create white triangle on the left side */
    position:absolute;
    content:"";
    top:0px;
    left:0px;
    height:0px;
    width:0px;
    border-top: 20px solid transparent;
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent;
}

h1:after{ /* this will create white triangle on the right side */
    position:absolute;
    content:"";
    top:0px;
    left:auto;
    right:0px;
    height:0px;
    width:0px;
    border-top: 20px solid transparent;
    border-right: 20px solid white; 
    border-bottom: 20px solid transparent; 
}

这样您就不必使用包装器或边框半径。您当然应该根据需要更改字体、字体大小、高度（等）。