曾经一直以为html中的border是直角的,直到有一天:
.test{
border: 20px solid;
border-top-color:#ff0000;
border-right-color:#00ff00;
border-bottom-color:#0000ff;
border-left-color:#FFFF00;
width:100px;
height: 100px;
background: #272822;
}
效果如下:
突然有一种被欺骗了的感觉。
我们可以选择理解一个border为两个三角形再加一个矩形。如上所示。
绘制小尾巴:
border-right: 6px solid black;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
当对一个角应用圆角样式,如果这个角相邻的两个border一个有定义而一个无定义,那么绘制的结果就是由粗到细的“小尾巴了”。[在整个绘制过程中,同一个图形它的绘制方法有很多种,例如一个矩形可以用 width x height构成,也可以由border x height(width)构成,甚至可以由border组合(width = height = 0)构成,根据情况选择吧。]
偶有所得,以记录之,以防忘记。