纯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>

效果:

在这里插入图片描述

还有很多没有整理上,遇到了再继续补全,如果有不对的望指正!!!!
  • 27
    点赞
  • 101
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值