对CSS了解越多，越觉得CSS能做很多有趣的事情。今天主要整理CSS的绘图功能。
一、绘制一个简单三角形
首先我们来绘制一个简单的三角形。
在绘制三角形之前，你要仔细想一想，对于一个div，你是否真的了解它的border-left/right/top/bottom长什么样子？
1、只存在一个边框时
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
}
结果：
2、存在两个边框时
// html
<body>
<div class='triangle'> </div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
}
结果：
怎么样？出乎意料吗？
3、存在四个边框时
三个边框的情况请自行脑补，我们直接来看四个边框。
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
border-right:100px solid yellow;
border-bottom:100px solid blue;
}
结果：
总结：边框总是会把div显示得“方方正正”，使整个div看起来不会出现棱角（除直角以外的其他角度）。
4、在四个边框的情况下，设置div宽高为0
// html
<body>
<div class='triangle'> </div>
</body>
//css
.triangle{
width:0;
height:0;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
border-right:100px solid yellow;
border-bottom:100px solid blue;
}
结果：
如上图所示，通过设置div的height和width为0 ，就可以得到由div的border绘制出的四个三角形。
我们只需设置其中三个border不可见，即可得到一个等边直角三角形。
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:0;
height:0;
background:#ddd;
border-left:100px solid transparent;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid blue;
}
结果：
二、绘制太极图形
1、方案一
将太极图案分解为如下三个div：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='parent'>
<div class='yang'></div>
<div class='yin'></div>
</div>
</body>
</html>
//css
.parent{
width:0;
height:300px;
border-left:150px solid transparent;
border-right:150px solid transparent;
border-radius:100%;
/* box-shadow:0 0 5px 5px #ddd; */
}
.yang,.yin{
width:150px;
height:150px;
margin:000-75px;
border-radius:50%;
position:relative;
}
.yang{
background:white;
}
.yin{
background:black;
}
.yang::after,.yin::after{
content:'';
display:block;
width:50px;
height:50px;
border-radius:50%;
position:absolute;
top:50px;
left:50px;
}
.yang::after{
background:black;
}
.yin::after{
background:white;
}
2、方案二
将太极图案分解为一个div，并在该div上设置“阴”和“阳”两个伪元素。这种方法只需构造一个div，更加简洁方便。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='parent'></div>
</body>
</html>
//css
*{
box-sizing:border-box;
}
.parent{
width:300px;
height:300px;
border-radius:50%;
background:linear-gradient(to right,#fff 0%,#fff 50%,#000 50%,#000 100%);
box-shadow:0 0 10px hsla(0,0%,0%,0.25);
}
.parent::before{
content:'';
display:block;
width:50px;
height:50px;
border:50px solid #fff;
background:#000;
border-radius:50%;
margin-left:75px;
}
.parent::after{
content:'';
display:block;
width:50px;
height:50px;
border:50px solid #000;
background:#fff;
border-radius:50%;
margin-left:75px;
}
“CSS绘制图形”就先说这么多，其实了解了原理后，这一部分还是挺简单的，无非就是利用border的一些特性、::before和::after等伪元素并使用定位来完成相应的效果。
由于个人水平有限，博客错误之处，烦请指正！
网友评论