CSS绘图（三角形，扇形，心形等）

以下一些图形的绘画将依赖边框属性来进行创作，因此我们先来了解一下边框border这个属性，先画一个正方形并为它定义四边不一样颜色的边框，将边框值设置大一点便于观察

.box{
	width: 100px;
	height: 100px;
	border: 20px solid;
	border-color: red blue black green; 
}
.point{
	width: 0;
	height: 0;
	border: 70px solid;
	border-color: red blue black green; 
}

<main class="container">
	<div class="box"></div>
	<div class="point"></div>
</main>

效果图

上图1我们可以看出单边框其实是梯形的，当正方形变小时梯形的上下底也会变小，当然梯形的下底还和边框的宽度有关，而梯形的上底则只和正方形的大小有关，设想当正方形缩小为一个点，那梯形的上底是不是也将成为一个点，那就是三角形了，如图2

三角形

分析：三角形就是宽高为0的正方形的单边框，图1的需要三角形朝向哪个方向，就显示其反向的单边框，其他的均隐藏掉即设置为透明即可，图2则是由两个三角形组成，因此要显示两边的border，另外两边隐藏掉

<main class="container">			
	<div class="triangle1"></div>
	<div class="triangle2"></div>
</main>	

.triangle1{
	width: 0;
	height: 0;
	border: 50px solid;
	/*四个值分别代表，上右下左边框颜色*/
	border-color: transparent transparent red transparent; 
	margin: 50px;
}
.triangle2{
	width: 0;
	height: 0;
	border: 50px solid;
	border-color: transparent red red transparent; 
	margin: 50px;
}

扇形

分析：扇形就是一个四分之一的圆，我们可以利用border先画一个圆，再隐藏掉其他3/4的圆。

<main class="container">
	<div class="sector"></div>
</main>

.sector{
	width: 0;
	height: 0;
	border: 50px #FAEBD7 solid;
	border-radius: 50%; 
	border-color:#b6ab9d transparent transparent transparent;						
}

食豆人

分析：食豆人就是一个四分之三的圆，我们可以利用border先画一个圆，再隐藏掉其他1/4的圆即可。

.sector{
	width: 0;
	height: 0;
	border: 80px solid;
	border-radius: 50%;
	border-color: #00aaff transparent #00aaff #00aaff; 
	margin: 50px;
}

聊天框

分析：三角形加长方形

<main class="container">			
	<div class="diamond"></div>			
</main>

.container{
	margin: 100px;
}
.diamond{
    width: 150px;
    height: 80px;
    background: #00aaff;
    position: relative;			   
    border-radius: 10px;
}	
.diamond::before{
	content:"";
	position: absolute;
	right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid #00aaff;
    border-bottom: 13px solid transparent;
}

心形

正方形加两个直径等于正方形边长的圆，圆分别上移左移，然后进行旋转45度

<main class="container">			
	<div class="heart"></div>			
</main>	

.heart{
   width: 80px;
    height: 80px;
    background: #ff0000;
    position: relative;	
	transform: rotate(45deg);
	transform: ;
}	
.heart::before,.heart::after{
	content:"";
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #ff0000;
}
.heart::before{		
	left: -40px;
	transform: rotate(45deg);
}
.heart::after{			
	top: -40px;
	transform: rotate(45deg);
}