如何用css画三角形&太极
2018-11-02 本文已影响3人
阿小经
一、如何用css画一个三角形
搜索学习资源：Google >>css tricks shape
>> 画一个如下图这样的三角形
三角形
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triangle</title>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
css
1.先设置div元素，为它上下边界设置不同颜色，方便改动
2.使其高度、宽度为0
3.使其上边界值为0（蓝色部分）
4.使绿色和红色区域变成透明色就可以得到我们要的三角形了。
5.简化代码
二、如何用css画一个太极(带animation动效)
静态效果图
- 用到伪元素，省略了两个div标签
- 用到css animation
思路:
1.先画1个大圆，设置相对定位
2.再画2个半径大小为大圆一半的小圆，设置绝对定位
3.通过设置小圆的padding做出太极的圆点（注意结合padding调整小圆宽高）
4.将两个小圆移动移动合适的位置上色形成太极
5.加入animation动画让太极旋转
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="yinyang">
</div>
<br><br>
<p>道生一，一生二，二生三，三生万物 ——《道德经》</p>
</body>
</html>
css
body{
background: #444;
color:white;
}
p{
text-align: center;
}
.yinyang{
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #1e5799 0%,#ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
position:relative;
margin:50px auto;/* 通过margin左右auto可实现居中 */
animation-duration:3s;
animation-name:spin;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.yinyang::before{
content:'';
width:20px;
height:20px;
border:40px solid black;
border-radius:50%;
position:absolute;
top:50px;
background-color:white;
}
.yinyang::after{
content:'';
width:20px;
height:20px;
border:40px solid white;
border-radius:50%;
position:absolute;
top:50px;
left:100px;
background-color:black;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}/* 加旋转动画 */
其他图形画法可参考css tricks shape
end
