要实现在页面上点击指定元素时,弹出一个信息提示框。因为本人对 CSS 的应用不太熟练,网上搜了一些实现的方式。在使用时,发现提示框的创建用到三角形的生成。本文记录如何使用 CSS 创建梯形和三角形。
实现的原理是设置元素的边框 border 属性创建梯形和三角形。
在生成三角形之前,我们可以看下面的2个例子。
生成梯形例子:
如果指定一个 div 的宽高相等,再单独设置每个边框的颜色和宽度(边框宽度相等),这时,我们可以发现div的四个方向上都是一个梯形,如下:
<style> /*设置div的宽高相等,四个border的颜色不同*/ .box1 { width: 20px; height: 20px; border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid blue; border-left: 50px solid black; } </style> <div class="box1"></div>
以上 CSS 代码效果如下:
生成三角形例子:
通过上面生成梯形的方式,我们可以将 div 的宽高属性都设置为 0,这时中间的内容区将消失,div的四个边框 border 将形成四个三角形,如下:
<style> /*设置div的宽高都为 0,四个border的颜色不同*/ .box1 { width: 0px; height: 0px; border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid blue; border-left: 50px solid black; } </style> <div class="box1"></div>
以上 CSS 代码效果如下:
通过以上2个例子的设置,我们可以想到,对于四个方向上的border,当我们将其他三个方向上的border透明设为透明时,一个梯形或三角形就出来了。
1. 制作单个梯形:
<style> /*设置div的宽高相等,其他三边的border颜色透明*/ div { float: left; } .box1 { width: 20px; height: 20px; border-top: 50px solid red; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; } .box2 { width: 20px; height: 20px; border-top: 50px solid transparent; border-right: 50px solid green; border-bottom: 50px solid transparent; border-left: 50px solid transparent; } .box3 { width: 20px; height: 20px; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid blue; border-left: 50px solid transparent; } .box4 { width: 20px; height: 20px; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid black; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div>
以上CSS代码效果如下(为方便查看,将4个梯形放置到一行显示):
1. 制作单个三角形:
<style> /*设置div的宽高为0,其他三边的border颜色透明*/ div { float: left; } .box1 { width: 0px; height: 0px; border-top: 50px solid red; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; } .box2 { width: 0px; height: 0px; border-top: 50px solid transparent; border-right: 50px solid green; border-bottom: 50px solid transparent; border-left: 50px solid transparent; } .box3 { width: 0px; height: 0px; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid blue; border-left: 50px solid transparent; } .box4 { width: 0px; height: 0px; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid black; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div>
以上CSS代码效果如下(为方便查看,将4个三角形放置到一行显示):
通过以上代码展示,可以看出,要实现梯形或三角形,只需要设置元素(一般用div)的border为对应的属性即可。