css如何实现徽章丝带图形

这篇文章主要介绍了css如何实现徽章丝带图形，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

徽章丝带

#badge-ribbon {  position: relative;  background: red;  height: 100px;  width: 100px;  border-radius: 50px;}#badge-ribbon:before,#badge-ribbon:after {  content: '';  position: absolute;  border-bottom: 70px solid red;  border-left: 40px solid transparent;  border-right: 40px solid transparent;  top: 70px;  left: -10px;  transform: rotate(-140deg);}#badge-ribbon:after {  left: auto;  right: -10px;  transform: rotate(140deg);}

感谢你能够认真阅读完这篇文章，希望小编分享的"css如何实现徽章丝带图形"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!