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

概述我需要在没有图像文件的情况下创建此功能区和星形外观(附加图像).我知道如何将星星放入其中,但我需要像图像所附的带状边.如果没有图像文件,只有纯CSS和 HTML,我怎么能这样做？我认为边界半径需要在这里 *** 纵. This is what I have so far,这太可怕了. 如何使用border-radius来获得此效果？ 我建议将CSS三角形与伪元素组合使用：在功能区的侧面三角形之前和之后,以 我需要在没有图像文件的情况下创建此功能区和星形外观(附加图像).我知道如何将星星放入其中,但我需要像图像所附的带状边.如果没有图像文件,只有纯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 ..你应该根据你的需要改变字体,字体大小,高度等等.

总结

以上是内存溢出为你收集整理的html – 功能区和星星 – 如何在没有图像文件的情况下完成此 *** 作？全部内容，希望文章能够帮你解决html – 功能区和星星 – 如何在没有图像文件的情况下完成此 *** 作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。