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

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

概述我需要在没有图像文件的情况下创建此功能区和星形外观(附加图像).我知道如何将星星放入其中,但我需要像图像所附的带状边.如果没有图像文件,只有纯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 – 功能区和星星 – 如何在没有图像文件的情况下完成此操作?所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1048543.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-25
下一篇2022-05-25

随机推荐

发表评论

登录后才能评论

评论列表(0条)

    保存