CSS代码实现三角形是一道典型的面试题,不难但是要理解代码的思维逻辑,达到熟练的程度,仔细看代码就会发现其中的规律,编程就是要不断地写代码,熟能生巧,也就体会到了其中的奥秘,写代码是一件很有成就感的事情,真正理解代码的时候就会感觉代码很简单,每个人都有他的天赋,所以大胆地学习吧!
加油,少年!
废话不多说,上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角</title>
<style>
/* 不同颜色的三角形组成的边框 */
.aa{
width: 0px;
height: 0px;
border-width: 80px;
border-style: solid;
border-color: blueviolet yellow red pink;
}
/* 尖角朝下 */
.bb{
width: 0px;
height: 0px;
border-width: 60px 60px 0px 60px;
border-style: solid;
border-color: blueviolet transparent transparent transparent;
}
/* 尖角朝左 */
.cc{
width: 0px;
height: 0px;
border-width:60px 60px 60px 0px;
border-style: solid;
border-color: transparent red transparent transparent;
}
/* 尖角朝上 */
.dd{
width: 0px;
height: 0px;
border-width: 0px 70px 70px 70px;
border-style: solid;
border-color: transparent transparent pink transparent;
}
/* 尖角朝右 */
.ee{
widows: 0px;
height: 0px;
border-width: 60px 0px 60px 60px;
border-style: solid;
border-color: transparent transparent transparent yellow;
}
</style>
</head>
<body>
<div class="aa"></div><br>
<div class="bb"></div><br>
<div class="cc"></div><br>
<div class="dd"></div><br>
<div class="ee"></div>
</body>
</html>
运行结果如下: