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

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

This is what I have so far,这太可怕了.

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

解决方法

我建议将CSS三角形与伪元素组合使用：在功能区的侧面三角形之前和之后,以及用于星形的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 ..你应该根据你的需要改变字体,字体大小,高度等等.