为什么关注此问题?
三角形的图标在网页设计是很常见的,如下拉框,空心三角形等等,有必要理解原理,提高工作效率
考察的知识点:
border应用的原理
实践出真知,动手吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.border {
width:50px;
height:50px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
</style>
<body>
<div class="border"></div>
</body>
</html>
效果图:
现在假想一下把元素的长和宽都设置为0px,边框的值不变,每一边的边框将会不会由梯形变成三角形?
.border {
width:0px;
height:0px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
效果图:假想成立
通过border-color设置不需要显示的边框使用透明色transparent
.border {
width:0px;
height:0px;
border: 20px solid;
border-color: rgb(223, 47, 144) transparent transparent transparent;
}
效果图:
拓展问题
1.项目中如果需要有缺口的三角形,如何实现?