CSS中画三角形是一个非常常见的需求,下面介绍两种常用的方法。.p1 { width: 0; height: 0; border-top: 50px solid transparent; border
CSS中画三角形是一个非常常见的需求,下面介绍两种常用的方法。
.p1 { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
以上代码表示画出一个高为50px,底边长为100px的红色三角形,通过设置border-top和border-bottom的宽度为0,再设置border-right和border-left的宽度来实现。
.p2 { width: 0; height: 0; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed; border-width: 0 25px 50px 25px; }
以上代码同样表示画出一个红色三角形,通过设置border-color为透明,再设置border-width使三角形底边长为50px,通过border-style设置三角形的样式。
这两种方法各有优劣,前者看起来更直观,代码更简单,后者可以通过border-style设置其他形状的三角形。
粉丝
0
关注
0
收藏
0