CSS中制作三角形是常见的技巧,最长边内凹的三角形可以用以下代码实现:.triangle { width: 0; height: 0; border-top: 100px solid transpar
CSS中制作三角形是常见的技巧,最长边内凹的三角形可以用以下代码实现:
.triangle { width: 0; height: 0; border-top: 100px solid transparent; border-left: 100px solid #333; border-bottom: 100px solid transparent; border-right: 0; }
在这个代码中,我们利用了border属性的特殊性质来制作三角形,把上、左、下三条边设置为透明,只在右边设置一个实心的边框,这个边框的长度决定了三角形的宽度,高度是通过上/下边框的长度来控制的。
注意到我们把左侧边框的颜色设置为了一个实心的颜色,这就是为了让最长的边内凹,因为我们的三角形是通过一个实心边框和两个透明边框组成的,如果最长的边也是透明的,那么它就会成为三角形的一个边角,而不是三角形的一条边了。
另外,要注意到三角形是用css很基础的技巧制作的,因此兼容性非常好,可以在不同浏览器、设备上都能正常地显示。
粉丝
0
关注
0
收藏
0