纯CSS绘制形状

Posted 2021-07-25 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯CSS绘制形状相关的知识，希望对你有一定的参考价值。

1、三角形

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

2、梯形

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

3、圆形

.circular{            
	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、菱形

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

8、心形

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

9、五边形

.pentagon {            
	width: 100px;            
	position: relative;            
	border-width: 105px 50px 0;            
	border-style: solid;            
	border-color: blue transparent;        
}

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

10、圆柱体

.cylinder {            
	position: relative;            
	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、长方体

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

.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;
}

12、棱锥

<div class="pyramid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>
    <!--下面 -->
	<div class="bottom"></div>
</div>

.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%;
}