css3 锐角问题

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018

之前一直以为,单纯的dom元素很难实现有锐角的的形状, 非锐角的可以通过多个元素进行拼接即可.

实际上答案早就是已知的. 我们知道通过border可以弄出一个三角形. 也就是说,通过border我们可以比较容易弄出锐角. image.png

1
2
3
4
5
6
7
8
9
10
.item{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 50px solid blue;
    border-top: 50px solid blue;
//  background-color: #F08080;  
}