一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第15天,点击查看活动详情。
我正在参加 码上掘金体验活动,详情:show出你的创意代码块
前言
昨天刚好利用掘金的码上掘金画了一个爱心,链接在这里,感兴趣可以阅读。
今天用css画一个三角形。
因为在css画一个正方形或者长方形,很容易,设置对应的宽度和高度就可以了。
但是对于三角形不一样,不能通过宽度和高度来设置,因为宽度和高度不能只设置单边的。
但是边框(border)可以设置任意一边的宽度,还可以设置颜色。
这不是刚好可以用来画三角形吗?
所以,我们可以利用边框(border)来实现三角形。
效果演示
三角形
平时我们设置border,就是一句1px solid #666
,可以满足大部分场景。
但是你知道上边框和左右边框是以什么为边界的吗?也就是边框之间的边界怎么划分的?
我举个例子
<style>
.triangle {
margin: 100px auto;
width: 100px;
height: 100px;
border-style: solid;
border-width: 15px;
border-color: red green blue pink;
}
</style>
<body>
<div class="triangle"></div>
</body>
哈哈哈,边框这样画,还挺好看的😂
边框是斜边平分的,分成4份。
如果你要把对应的颜色设置透明,则对应的颜色会透明,如果把对应的某个边框宽度设置为0,则那行就被隐藏
上边框颜色设置透明
上边框宽度设置为0
不知道你发现了没有,每个边框都是一个梯形。
如果我们把宽度和高度设置为0,它们不就是三角形了吗?
<style>
.triangle {
margin: 100px auto;
width: 0;
height: 0;
border-style: solid;
border-width: 15px;
border-color: red green blue pink;
}
</style>
<body>
<div class="triangle"></div>
</body>
可以看到三角形的轮廓已经看到了
然后如果我们可以把其它边框的颜色设置透明,只留一个颜色,那就是三角形了。
<style>
.triangle {
margin: 100px auto;
width: 0;
height: 0;
border-style: solid;
border-width: 60px;
border-color: transparent transparent blue transparent;
}
</style>
这个就是一个朝上的等腰三角形。
我们还通过控制border的宽度来实现各式各样的三角形。
直角三角形
<style>
.triangle {
margin: 100px auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0px 60px 60px;
border-color: transparent transparent blue transparent;
}
</style>
总结
css画三角形主要是利用border的宽度和颜色来实现的,另外需要注意,还需要把元素的宽度和高度设置为0才有效果。