注意：宽度可以随便定义，高度是要根据宽度计算出来的。
公式：height = width*cos(30°)*2
以下两种方法都可以实现。
【第一种】使用div+border，通过伪元素来实现
<style>
.block{
width: 100px;
height: 173.2px;
background-color: skyblue;
position:relative;
margin: 0 auto;
}
.block::after{
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-width: 86.6px;
border-bottom-width: 86.6px;
border-right-color: red;
transform: translateX(-100%);
}
.block::before{
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-width: 86.6px;
border-bottom-width: 86.6px;
border-left-color: red;
transform: translateX(100%);
}
</style>
<body>
<div class="block"></div>
</body>效果图如下：
【第二种】
通过css3中的旋转来实现。
<style>
.block2{
width: 100px;
height: 173.2px;
background-color: skyblue;
position:relative;
margin: 100px;
}
.block2::after{
position: absolute;
content: '';
width: 100px;
height: 173.2px;
background-color: pink;
/* z-index: 1; */
transform: rotate(60deg);
}
.block2::before{
position: absolute;
content: '';
width: 100px;
height: 173.2px;
background-color: rgb(123, 203, 147);
/* z-index: 1; */
transform: rotate(-60deg);
}
</style>
<body>
<div class="block2"></div>
</body>
selector .swiper-pagination-bullet{
position: relative;
height: 9px!important;
width: 5px!important;
border-radius:0;
}
selector .swiper-pagination-bullet::after{
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right-color: #04BDFC;
transform: translateX(-100%);
}
selector .swiper-pagination-bullet::before{
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #04BDFC;
transform: translateX(50%);
}