How to realize badge ribbon graphics with css

This article mainly introduces css how to achieve badge ribbon graphics, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Badge ribbon # 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);} Thank you for reading this article carefully. I hope the article "how to achieve Badge Ribbon Graphics" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!