功能区和星星 - 如何在没有图像文件的情况下完成此操作？

Question

我需要在没有图像文件的情况下创建此功能区和星形外观（附加图像）。我知道如何将星星放入其中，但我需要像图像所附的带状边。如果没有图像文件，只有纯CSS和HTML，我怎么能这样做？我认为边界半径需要在这里进行操作。

This is what I have so far，这太糟糕了。

如何使用border-radius来获得此效果？

Answer 1

我建议将CSS三角形与伪元素:before和:after组合用于功能区的侧三角形，并将html字符组合为★：

working 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; 
}

这样你就不必使用包装器或border-radius ..你应该根据你的需要改变字体，字体大小，高度等等。