css 实现一个尖角_请用CSS实现一个带尖角的正方形

尖角的实现主要是通过设置border，设置一个div的width、height为0，给border设置一定的宽度，并且设置上下左右不同的颜色，即可出现三角

根据需要设置其它三个border的颜色为透明，即可得到一个三角

三角出现以后，可以再添加一个比该三角小一圈的透明三角，并将其覆盖，此时便会出现所需要的尖角。

​添加三角可以通过添加div来实现，也可以使用伪类实现，这样可以避免添加多余的没有语义的标签，代码如下

.square{

width:100px;

height: 100px;

background-color: #fff;

border:2px #000 solid;

position: relative;

}

.square:before,.square:after{

width:0px;

height: 0px;

border: 8px transparent solid;

border-left-color:#fff;

position: absolute;

//相对非static的父级元素定位，position默认static，故square设置position为relative

content: "";

left: 100%;

top:22px;

}

.square:before{

border: 10px transparent solid;

border-left-color:#000;

top:20px;

}

效果如下​

​

​