纯CSS绘制形状（三角形、菱形、球体，长方体等等

     在前段时间看到有的面试题说让说一下梯形，当时自己懵了，所以把各种各样的常见的形状的CSS实现总结一下，基本形状实现之后就可以利用这些基本形状进行组合，就可以实现复杂的形状：

1、三角形

        .triangle{           
		         width: 0;            
		         height: 0;           
		          border: 50px solid blue;      
		          //可以通过改变边框的颜色来控制三角形的方向
		          border-color: blue transparent transparent transparent;       
           }

2、梯形

.trapzoid{            
		width: 40px;            
		height: 100px;            
		border: 50px solid blue;            
		border-color: transparent transparent blue transparent;         	
	}

实现的效果如图：

4、圆形

.circle{            
		width: 100px;            
		height: 100px;            
		border-radius: 50%;           
		 background: blue;        
 }

实现的效果：

4、球体

        .sphere{            
		        width: 100px;            
		        height: 100px;            
		        border-radius: 50%;            
		        background: radial-gradient(circle at 70px 70px,#5cabff,#000000);     
		}

实现的效果如下：

5、椭圆

        .ellipse{            
		        width: 200px;            
		        height: 100px;            
		        border-radius: 50%;            
		        background: blue;        
		 }

实现的效果：

6、半圆

        .semicircle{            
		        width: 50px;            
		        height: 100px;           
		        border-radius: 50px 0 0 50px ;            
		        background: blue;        
	        }

效果如下：

7、菱形

 .rhombus{
            width: 100px;
            height: 100px;
            transform: rotateZ(45deg)skew(30deg,30deg);
            background: blue;
        }

效果如下：

8、心

心是由两个圆形与一个矩形进行组合的

		.heart {
		    width: 100px;
		    height: 100px;
		    transform: rotateZ(45deg);
		    background: red;
		}
		
		.heart::after,
		.heart::before {
		    content: "";
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    display: block;
		    background: red;
		    position: absolute;
		    top: -50%;
		    left: 0;
		}
		
		.heart::before {
		    top: 0;
		    left: -50%;
		}

	

效果：

9、五边形

五边形是由三角形和梯形组成的

        .pentagonal {            
		        width: 100px;            
		        position: relative;            
		        border-width: 105px 50px 0;            
		        border-style: solid;            
		        border-color: blue transparent;        
		        }
        .pentagonal:before {            
		        content: "";            
		        position: absolute;            
		        width: 0;            
		        height: 0;            
		        top: -185px;            
		        left: -50px;            
		        border-width: 0px 100px 80px;           
		        border-style: solid;            b
		        order-color: transparent transparent blue;        
		        }
	

效果：

10、圆柱体

由一个椭圆和一个圆角矩形进行组合

        .cylinder {            
		        position: relative;            t
		        ransform: rotateX(70deg);        
        }
        .ellipse {           
		        width: 100px;            
		        height: 100px;             
		        background: deepskyblue;           
		        border-radius: 50px;        
		    }
        .rectangle {           
		        width: 100px;            
		        height: 400px;            
		        position: absolute;            
		        opacity: 0.6;            
		        background: deepskyblue;            
		        top: 0;            
		        left: 0;             
		        border-radius: 50px;            
		        z-index: -1;        
		}
		

效果：

11、长方体

由六个矩形实现

.cuboid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}

.cuboid div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: .4s;
}

.cuboid .front {
    transform: rotateY(0deg) translateZ(100px);
    background: #a3daff;
}

.cuboid .back {
    transform: translateZ(-100px) rotateY(180deg);
    background: #a3daff;
}

.cuboid .left {
    transform: rotateY(-90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .right {
    transform: rotateY(90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .top {
    transform: rotateX(90deg) translateZ(100px);
    background: #0080ff;
}

.cuboid .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background: #0080ff;
}
<div class="cuboid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>
    <!--上面 -->
    <div class="top"></div>
    <!--下面 -->
    <div class="bottom"></div>
</div>

效果：

12、棱锥

四个三角形和一个矩形组成

.pyramid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom-width: 200px;
    opacity: 0.8;
}

.pyramid .front {
    transform: translateZ(100px) rotateX(30deg);
    border-bottom-color: #a3daff;
    transform-origin: 0 100%;
}

.pyramid .back {
    transform: translateZ(-100px) rotateX(-30deg);
    border-bottom-color: #1ec0ff;
    transform-origin: 0 100%;
}

.pyramid .left {
    transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: #0080ff;
    transform-origin: 50% 100%;
}

.pyramid .right {
    transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: #03a6ff;
    transform-origin: 50% 100%;
}

.pyramid .bottom {
    transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
    background: cyan;
    width: 200px;
    height: 200px;
    border: 0;
    top: 0;
    transform-origin: 50% 100%;
}
<div class="pyramid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>

    <!--下面 -->
    <div class="bottom"></div>
</div>

效果：

还有很多没有整理上，遇到了再继续补全，如果有不对的望指正！！！！