【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

在网页中，常常会用到各类Icon，若是总是麻烦设计狮画出来难免有些很差意思，因此有时候咱们也能够用CSS写出各类简单的形状，一来能够减轻他们的负担，二来也可使用CSS替代图片，提升加载速度。

在网页中，结合CSS能画出来的最基本的形状就是矩形，因此，咱们能够在矩形的基础上作出各类变换，获得不少不一样的形状。

此次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问题）

先作一些通用的基础设置：

div {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 100px;
	background-color: red;
}

毫无疑问，结合HTML就能够画出最基本的 矩形：

<div>矩形</div>

效果：

下面针对矩形作一些变换：

圆形：

<div class="circle">圆形</div>

border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。

原理：四个角都是圆角：四个角的取值为50%或为宽和高同样的值（此处即100px）。

.circle {
	border-radius: 50%;
}

半圆：

<div class="semi-circle">半圆</div>

原理：左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高同样的值，右下角、左下角的值不变（等于0）；另外，由于还要设置高度值为原来高度的一半才是标准的半圆。

.semi-circle {
	border-radius: 100px 100px 0 0;
	height: 50px;
}

扇形：

<div class="sector">扇形</div>

原理：左上角是圆角，其他三个角都是直角：左上角的值为宽和高同样的值，其余三个角的值不变（等于0）。

.sector {
	border-radius: 100px 0 0;
}

弧形：

<div class="arc">弧形</div>

原理：两个对角变，另外两个对角不变：好比，左上角、右下角取值为宽和高同样的值，右上角、左下角的值不变（等于0） .添加transform属性可旋转成平躺的弧形，相似人的嘴巴形状，(*^__^*) 嘻嘻……

.arc{
		border-radius: 100px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

小三角：

<div class="triangle"></div>
<div class="arrow"></div>

原理：设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成只有边框，但由于设置的边框值比较大（为了保证三角形看起来不会过小或者太细），而后设置每个边框的颜色不一样，就能够看出三角形其实就能够是由边框变换而来的。若只想显示某一块三角形，能够把其余的边框颜色设置为透明，即transparent。

.triangle{
		border: 50px solid green;
		width: 0;
		height: 0;
		border-top-color: yellow;
		border-right-color: blue;
		border-bottom-color: pink;
		border-left-color: orange;
	}
	.arrow{
		background: none;	/*为了清除前面div设置的背景颜色*/
		border: 50px solid red;
		width: 0;
		height: 0;
		border-color: red transparent transparent transparent;
	}

疑问框：

<div class="rectangle">疑问框</div>

原理：由圆角矩形和一个小三角组成：可结合伪元素、定位实现。

/*圆角矩形*/
	.rectangle{
		width: 200px;
		border-radius: 15px;
		position: relative;
	}
	/*小三角*/
	.rectangle::before{
		content: "";
		width: 0;
		height: 0;
		border: 15px solid red;
		border-color: red transparent transparent transparent;
		position:absolute;
		bottom: -30px;
		left: 40px;
	}

Author：致知

Sign：路漫漫其修远兮，吾将上下而求索。