css怎么制作多边形 |rel css

1. 使用border生成三角形

code {
width: 0;
height: 0;
border-width: 12px;
border-style: solid;
border-color: transparent transparent #007bff transparent;
}

2. 使用伪元素生成等边六边形

code {
position: relative;
width: 120px;
height: 69px;
background-color: #007bff;
}
code:before {
content: "";
display: block;
border: 60px solid transparent;
border-bottom-color: #007bff;
position: absolute;
top: -60px;
left: 0;
}
code:after {
content: "";
display: block;
border: 60px solid transparent;
border-top-color: #007bff;
position: absolute;
bottom: -60px;
left: 0;
}

3. 使用伪元素与transform实现梯形

code {
position: relative;
width: 200px;
height: 100px;
background-color: #007bff;
}
code:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
transform: skewY(20deg);
transform-origin: 0;
}
code:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: inherit;
transform: skewY(-20deg);
transform-origin: 100%;
}

有了以上的方法和代码，相信大家可以轻松实现网页多边形的效果。但要注意的是，不同的浏览器对css的支持不尽相同，建议在使用时进行兼容性测试。