<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.triangle{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: red green blue yellow;
}
.triangle{
width: 0px;
height: 0px;
border-width: 60px;
border-style: solid;
border-color: transparent transparent red transparent;
transform: rotate(180deg);
margin-left: 80px;
}
.box{
width: 400px;
height: 400px;
background-color: red;
border-radius: 80px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="triangle"></div>
</body>
</html>
border制作三角形的原理
- 利用border的3个属性:border-width/border-style/border-color去实现;
- 宽度和高度要为0,实现一个由4个小三角形构成的正方形；
- 要啥方向的三角形,只需要保留这个方向的颜色值,其余方向的颜色值设为透明即可,画出三角形然后旋转即可;
- 三角形的大小由border-width边框线的宽度去控制
- 三角形的颜色由border-color边框线的宽度去控制
转载请注明：大灰牛博客 » border制作三角形的技巧(面试题)