css实现三角形，直角梯形，立方体
今天给大家分享一些用CSS可以实现的一些有意思的东西。
三角形
CSS实现三角形的原理的就是利用border的特性，下面大家来看几个例子：
<style>
.trangle{
width:40px;
height:40px;
border-width:5px ;
border-style: solid;
border-color: rgb(38, 167, 55) red blue pink;
}
</style>
<div class="trangle"></div>
<style>
.trangle{
width:40px;
height:40px;
border-width:20px ;
border-style: solid;
border-color: rgb(38, 167, 55) red blue pink;
}
</style>
<div class="trangle"></div>
<style>
.trangle{
width:40px;
height:40px;
border-width:80px ;
border-style: solid;
border-color: rgb(38, 167, 55) red blue pink;
}
</style>
<div class="trangle"></div>
看完上面那三张图，不知道大家有没有什么想法，这三张图我们分别设置border的宽度为5,20,40，我们发现这个盒子越来越接近于三角形。我们发现每一条边的border都与这条边形成了一个梯形，并且两条斜线的交点是我们这个盒子的内部中心点。写到这的时候，我相信大家都知道怎么实现三角形了，我们把这个盒子变成一个点不就行了。对这就是我们实现三角形的关键，怎么变成一个点呢，把它的宽度和高度设置为0就可以了啊。我们来试一下：
<style>
.trangle{
width:0px;
height:0px;
border-width:80px ;
border-style: solid;
border-color: rgb(38, 167, 55) red blue pink;
}
</style>
<div class="trangle"></div>
正如我们想象的，成功的实现了四个三角形。我们想要哪个，取出哪个就行了。比如我们想要第一个三角形，可以这么设置：
<style>
.trangle{
width:0px;
height:0px;
border-width:80px ;
border-style: solid;
border-color: rgb(38, 167, 55) transparent transparent transparent;
}
</style>
<div class="trangle"></div>
大家可以看到我们成功的拿到了第一个三角形，在实际工作中，三角形的颜色，大小，位置我们都可以自己设置。
直角梯形
在我们实现三角形的过程中，已经实现了梯形。如下：
<style>
.trangle{
width:40px;
height:40px;
border-width:80px ;
border-style: solid;
border-color: rgb(38, 167, 55) pink red blue;
}
</style>
<div class="trangle"></div>
这个时候是比较规则的等腰梯形，这时候我们只要改造一下，将border的一边宽度设置为0，效果如下：
<style>
.trangle{
width:40px;
height:40px;
border-width:80px 0 80px 80px;
border-style: solid;
border-color: rgb(38, 167, 55) pink red blue;
}
</style>
<div class="trangle"></div>
想要哪个梯形，直接设置其他的border颜色为透明即可：
正方体
实现正方体需要使用css3的transform属性，由于是一个3D的图形，需要用到rotateX/Y/Z.translateX/Y/Z，给大家先介绍一下rotate是旋转属性，如rotateX就是绕X轴旋转，单位是deg。translate是平移属性，translateX是向X轴方向平移，单位是PX，下面我们先来实现一个正方体：
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.square-box{
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform: rotateY(40deg) rotateX(30deg);
position: relative;
}
.square{
width: 200px;
height: 200px;
position: absolute;
}
.one{
transform: rotateX(90deg) translateZ(100px);
background: pink;
}
.two{
transform: rotateX(90deg) translateZ(-100px);
background: rgb(212, 13, 46);
}
.three{
transform: rotateY(90deg) translateZ(100px);
background: rgb(55, 47, 163);
}
.four{
transform: rotateY(90deg) translateZ(-100px);
background: rgb(173, 167, 168);
}
.five{
transform: translateZ(100px);
background: rgb(173, 33, 173);
}
.six{
transform: translateZ(-100px);
background: rgb(209, 86, 15);
}
</style>
</head>
<body>
<div class="square-box">
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
<div class="square four"></div>
<div class="square five"></div>
<div class="square six"></div>
</div>
</body>
</html>
···
具体实现就是，两个面当做正方体的上下两面，两个面当做左右两面，两个面当做前后两面，利用rotate和translate属性把它们放到该放的位置上面。还有一点要注意的是旋转的时候盒子的X，Y，Z轴，就是以当前盒子的中心点沿水平方向的就是X轴，沿竖直方向的是Y轴，我们视线对着屏幕的方向就是Z轴，所以说旋转之后还需要向对应的方向平移盒子的一半长度。注意，平移的方向是以盒子旋转之前的X，Y，Z轴的方向为准。
