[CSS3] 绘制六边形

533_

于 2022-12-16 13:28:13 发布

阅读量185

点赞数

分类专栏： # css 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_14993591/article/details/128341649

版权

css 专栏收录该内容

76 篇文章 1 订阅

订阅专栏

在这里插入图片描述

 #hexagon {  
    width: 100px;  
    height: 55px;  
    background: red;  
    position: relative;  
}  
#hexagon:before {  
    content: "";  
    position: absolute;  
    top: -25px;  
    left: 0;  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-bottom: 25px solid red;  
}  
#hexagon:after {  
    content: "";  
    position: absolute;  
    bottom: -25px;  
    left: 0;  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-top: 25px solid red;  
}