用CSS绘制几何图形

用CSS绘制几何图形

本部分的视频讲解请到B站（Bilibili）搜索“风林248”，查看视频《Web前端技巧-CSS绘图》。

矩形

<div class="rect"></div>

.rect{
    /*矩形块*/
	width: 100px;
	height: 50px;
	background-color: red;
}

如果把背景颜色改成边框，可得到矩形框。

.rect{
    /*矩形框*/
	width: 96px;
	height: 46px;
	border: solid 2px red;
}

这种元素的大小包含两边边框宽度。

圆角矩形

<div class="roundrect"></div>

.roundrect{
    /*圆角矩形*/
	width: 100px;
	height: 50px;
	background-color: red;
	border-radius: 20px;
}

border-radius属性用于定义圆角，取值1~4个长度值，值越大角越圆。
四个角弧度相同时只需取一个值，范围是0~50%。

圆、椭圆

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

.circle{
    /*圆*/
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 50%;
}

宽度、高度相同时画出来的是圆，不同时是椭圆。

三角形

<div class="angle"></div>

.angle{
    /*三角形*/
	width: 0;
	height: 0;
	border-bottom: solid 30px red;
	border-left: solid 15px transparent;