css 边框（border）探索与妙用

.chat{
	width: 50px;
	height: 50px;
	border-style:solid;
	border-width: 50px;
	border-color: red #7802fb #02befb #1efb02;
}

根据以上效果，我们发现边框是由三角形或者梯形无缝拼接的，根据这个特点，我们可以实现各种形状。

1.不规则三角形

 

我们可以把它的长边作为底边来明确下三角形该怎么写

这样就很明白了吧，上代码

.chat{
	width:100px;
	height:50px;
	background: #02befb;
	border-radius: 10px;
	position: relative;
}
.chat:after{
	content: '';
	position: absolute;
	top:15px;
	right:-11px;
	border-style:solid;
	border-width: 0px 10px 6px 6px;
	border-color: transparent transparent #02befb;/*透明 透明  灰*/
	transform: rotate(-45deg);
}

 

 

 

 

2.边框三角形

可以由两个三角形组成，一大一小。

.chat{
	width:100px;
	height:50px;
	position: relative;
}
.chat:after{
	content: '';
	position: absolute;
	top:2px;
	left:11px;
	border-style:solid;
	border-width: 50px;
	border-color: transparent transparent transparent white;
}
.chat:before{
	content: '';
	position: absolute;
	top:0px;
	left:10px;
	border-style:solid;
	border-width: 52px;
	border-color: transparent transparent transparent #7802fb;
}

3.正五边形

边长53px，上部为梯形，下部为三角形

.chat{
	width: 53px;
	border-style:solid;
	border-width: 50px 18px;
	border-color: transparent transparent #02befb transparent;
	position: relative;
}
.chat:before{
	content: "";
	position: absolute;
	top:50px;
	left:-18px;
	border-style:solid;
	border-width: 29px 44px 0;
	border-color: #02befb transparent transparent transparent
}

border-radius属性，可以写出各种弧形

4.半圆

高度设为宽度一半，左上右上的圆角不设置

.chat{
	width:100px;
	height:50px;
	background: red;
	border-radius: 0 0 50px 50px;
}

5.扇形

由上面的再延伸下，宽度也为一半，右下圆角不设

.chat{
	width:50px;
	height:50px;
	background: red;
	border-radius: 0 0 0 50px;
}

6.弧形

只让一个对角有弧度

.chat{
	width:50px;
	height:50px;
	background: red;
	border-radius: 0 50px;
}

7.风车

.content{
	width:400px;
	height:400px;
	margin:100px auto;
	position: relative;
}
.content div{
	width: 0;
	height: 0;
	border-style:solid;
	border-width: 100px 100px 100px 0;
	border-color: transparent rosybrown firebrick transparent;
	position: absolute;
	bottom:200px;right:200px;
	transform-origin:right bottom;
}
.chat1{
	animation:mymove1 2s infinite linear;
}
.chat2{
	animation:mymove2 2s infinite linear;
}
.chat3{
	animation:mymove3 2s infinite linear;
}
.chat4{
	animation:mymove4 2s infinite linear;
}
@keyframes mymove1 {
	from {transform: rotate(0);}
	to {transform: rotate(360deg);}
}
@keyframes mymove2 {
	from {transform: rotate(90deg);}
	to {transform: rotate(450deg);}
}
@keyframes mymove3 {
	from {transform: rotate(180deg);}
	to {transform: rotate(540deg);}
}
@keyframes mymove4 {
	from {transform: rotate(270deg);}
	to {transform: rotate(630deg);}
}

<div class="content">
	<div class="chat1"></div>
	<div class="chat2" style="transform: rotate(90deg);"></div>
	<div class="chat3" style="transform: rotate(180deg);"></div>
	<div class="chat4" style="transform: rotate(270deg);"></div>
</div>