border 和 border-radius

border

• 使用border实现一个等边正三角形效果

.Triangle{
width:0;
height:0;
border-bottom:30px solid #f00;
border-left:15px dashed transparent;
border-right:15px dashed transparent;
}

效果如下

等边三角形

• 梯形

.box{
width:50px;
border-bottom:50px solid #f00;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

效果如下

梯形

打开控制台可以看到这个梯形的宽高，方便理解border的作用

梯形宽高

border-bottom:50px solid #f00
等于这个梯形的高度50px

border-left:50px solid transparent
border-right:50px solid transparent
width:50px
以上加起来等于梯形的底边150px

border-radius

使用border-radius 实现叶子