css6边形技巧（css六边形边框）

CSS6边形技巧是CSS3的一项新特性，它让我们可以很方便地制作各种各样的边形。在这里，我们将介绍一些有关CSS6边形技巧的基本知识和技巧。

/* 创建三角形 */.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}
/* 创建正方形 */.square {
    width: 50px;
    height: 50px;
    background-color: red;
}
/* 创建梯形 */.trapezoid {
    height: 0;
    width: 50px;
    border-top: 50px solid red;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}
/* 创建六边形 */.hexagon {
    width: 80px;
    height: 45px;
    background-color: #6C6;
    position: relative;
}
.hexagon:before,.hexagon:after {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 22px solid #6C6;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
}
.hexagon:before {
    transform: rotate(60deg);
}
.hexagon:after {
    transform: rotate(-60deg);
}
/* 创建菱形 */.rhombus {
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    background-color: red;
}
    

以上是五种基本的边形，每个都有一个预设的CSS类名，你可以根据需要适当修改它们的大小、颜色和位置。还有其他更复杂的边形技巧，我们下次再介绍。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！