How to realize hexagonal Diamond by css

Editor to share with you how to achieve css hexagonal diamond, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Diamond

# cut-diamond {border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; box-sizing: content-box; position: relative; margin: 20px 0 50px 0;} # cut-diamond:after {content: "; position: absolute; top: 25px; left:-25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent Border-width: 70px 50px 050px;} these are all the contents of the article "how to achieve hexagonal diamonds in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!