CSC 画三角形
2019-01-30 本文已影响0人
大喵chary
一、下面介绍CSS画三角形的原理
1.首先画一个div，给它宽高。再加上四条边的边框。
div {
width: 50px;
height: 50px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid black;
border-bottom: 50px solid yellow;
}
运行结果：
image.png
2.div的width、height置零，看运行结果。
div {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid black;
border-bottom: 50px solid yellow;
}
image.png
3.下面把其他三角形边框颜色设置成透明色（即：border-color : transparent;），留下需要的即可。
div {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-left:50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
4.去掉上边框。下面是等腰三角形
div {
width: 0px;
height: a0px;
border-top: 50px solid transparent;
border-left:50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
CSS三角形原理是：元素高度宽度为0，且没有下边框，左右边框透明即可。
要想画直角三角形。直接去掉右边框即可。
div {
width: 0px;
height: a0px;
border-top: 50px solid transparent;
border-left:50px solid blue;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
二、 如何调整边框width来绘制各种形状的三角形
实际运用中，我们可能会需要制造各种形状的三角形，那么该怎么去调整三角形的形状呢？
底边固定时，只要调整顶点的位置，就可以控制形状。
顶点水平位置：由border-left和border-right决定，顶点向左调整时，需增加border-right，减少border-left；顶点向右调整时，反之。
顶点垂直位置：由border-bottom决定，border-bottom增加，顶点向上，反之向下。
接下来看图：
image.png
从1 到 2，三角形的顶点向上移动了，对应的，border-bottom增加了。
从1 到 3，三角形的顶点向右移动了，对应的，border-right减少了。
从1 到 4，三角形的顶点向下移动了，对应的，border-bottom减少了。
代码如下：
.box1{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid blue;
}
.box2{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid black;
}
.box3{
width: 0;
height:0 ;
border-left:100px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid green;
}
.box4{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid red;
}
三、 用三角形生成器生成
没有彩蛋怎么算过年，附上一枚懒人神奇，一秒钟出三角形，堪比渣渣辉：
