最近在写一个项目,然后想做一个带三角形的导航栏,然后突然发现自己还不知道前端怎么写出一个三角形(太菜了)。。。
然后本来打算用canvas画一个出来的,发现有点大材小用???然后百度才发现可以直接用border设置出来,然后学习了一下,发现还挺有意思的
大家平时都知道border是用来设置div边框的,但是一般都设置得很小,然后我们来看看当border变大后,有什么视觉效果
**html**
<body>
<div class="square"></div>
</body>
css
<style>
.square{
width: 100px;
height: 100px;
border: 20px solid;
/* 分别设置上右下左边框的颜色 */
border-color: red orange yellow green;
}
</style>
效果
是不是有种立体的感觉,然后我们会发现边框变成了梯形,name梯形和三角形之间怎么转换呢?
我们试着增大div的宽高
css
<style>
.square{
width: 200px;
height: 200px;
border: 20px solid;
/* 分别设置上右下左边框的颜色 */
border-color: red orange yellow green;
}
</style>
效果
我们发现紫色阴影部分变大了,这就是我们的div增大宽高的结果,是不是更加没有三角形的形状了呢?
那么我们来试着增大border的宽度
css
<style>
.square{
width: 100px;
height: 100px;
border: 60px solid;
/* 分别设置上右下左边框的颜色 */
border-color: red orange yellow green;
}
</style>
效果
我们发现形状更立体了,我们可以猜想,我们继续增大border的宽度,同时减小div的宽高,是不是没个border终会交汇,然后形成一个被四个三角形所分割的div呢?
答案是肯定的!!!
直接看效果:
当中间的空白部分没有时(即div的宽高为0)则为四个三角形
所以实现三角形的原理就是让div四边的边框平分他,当其他三面显示为透明色(背景色、transparent)时,就可以显现出来一个三角形。
最终CSS代码
<style>
.square{
width: 0;
height: 0;
border: 40px solid;
/* 分别设置上右下左边框的颜色 */
border-color: red transparent transparent transparent;
}
</style>
效果