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

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

1、三角形

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

2、梯形

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

实现的效果如图：

4、圆形

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

实现的效果：

4、球体

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

实现的效果如下：

5、椭圆

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

实现的效果：

6、半圆

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

效果如下：

7、菱形

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

效果如下：

8、心

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

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

效果：

9、五边形

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

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

效果：

10、圆柱体

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

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

效果：

11、长方体

由六个矩形实现

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

.cuboid div {
    position: absolute;
     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 {
     200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
     0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom- 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;
     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>

效果：

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