HTML

导入代码模板：

* {

margin: 0;

}

.hex {

margin: 0.5em auto;

width: 16vw;

height: 16vw;

}

/* ===== 方法 1 ===== */

/* 可工作在所有支持 2D transforms的浏览器上 */

/* 可以到这里查看 https://caniuse.com/#feat=transforms2d */

.hex:nth-of-type(1) {

position: relative;

overflow: hidden;

-webkit-transform: rotate(-30deg) skewX(30deg) scaleY(0.86603);

transform: rotate(-30deg) skewX(30deg) scaleY(0.86603);

}

.hex:nth-of-type(1):after {

position: absolute;

left: calc(50% - 6.9282vw);

/* undo transforms in reverse order */

width: 13.85641vw;

height: 16vw;

-webkit-transform: scaleY(1.1547) skewX(-30deg) rotate(30deg);

transform: scaleY(1.1547) skewX(-30deg) rotate(30deg);

background: -webkit-linear-gradient(black, cyan);

background: linear-gradient(black, cyan);

content: "";

}

/* ===== 方法 2 ===== */

/* 使用svg多边形，支持所有浏览器 */

.hex:nth-of-type(2) svg {

width: 100%;

height: 100%;

}

.hex:nth-of-type(2) use {

fill: url(#bg);

}

/* ===== 方法 3 ===== */

/* 可工作在所有支持clip-path方法的浏览器中 */

/* IE/Edge不支持，可以在这里投票建议微软实现：*/

/* https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6519995-support-clip-path-property */

.hex:nth-of-type(3) {

background: -webkit-linear-gradient(black, cyan);

background: linear-gradient(black, cyan);

-webkit-clip-path: url(#cp);

clip-path: url(#cp);

}

/* ===== 方法 4 ===== */

/* 可工作在支持clip-path基本形状的浏览器中 */

/* 目前只有基于WebKit的浏览器支持 */

.hex:nth-of-type(4) {

background: -webkit-linear-gradient(black, cyan);

background: linear-gradient(black, cyan);

-webkit-clip-path: polygon(50% 0%, 93.30127% 25%, 93.30127% 75%, 50% 100%, 6.69873% 75%, 6.69873% 25%);

clip-path: polygon(50% 0%, 93.30127% 25%, 93.30127% 75%, 50% 100%, 6.69873% 75%, 6.69873% 25%);

}