HTML+CSS写三角形原理
html:
<div class="triangle">
这是三角形
</div>
css:
.triangle{
border-top: 20px solid green;
border-left: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid blue;
}
加上4边边框之后的效果:
在这基础上把中间内容区域的宽高设置为0:
.triangle{
width: 0;
height: 0;
border-top: 20px solid green;
border-left: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid blue;
}
去掉宽高效果:
去掉文字:
<div class="triangle">
<!--这是三角形-->
</div>
去掉文字效果:
总结:现在就剩下4个小的三角形,想要哪一边的三角形就把其他三边的颜色设置为透明
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
width: 0;
height: 0;
border-top: 20px solid transparent; /*transparent指全透明颜色*/
border-left: 20px solid transparent;
border-bottom: 20px solid yellow;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="triangle">
<!--这是三角形-->
</div>
</body>
</html>
效果:
It’s over