html如何将图片做成六边形,css 如何在html页面上输出一个六边形呢？

摘要:

下文讲述使用css脚本在页面上绘制一个六边形的方法分享,如下所示:

六边形是数学里面常见的一种不规则的形状，那么如何使用css脚本在html上绘制一个六边形呢？

实现思路:

1.绘制一个长方形

2.绘制一个三角形

3.将长方形 上下分别叠加两个三角形即可形成一个六边形

如下所示:

例:

使用css绘制一个六边形的示例分享

maomao365.com

css 绘制 六边形 的示例分享

---

#liubianxing {

margin-top:60px;

width: 100px;

height: 55px;

background: green;

position: relative;

}

#liubianxing: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 blue;

}

#liubianxing: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 orange;

}

css绘制六边形的示例分享