如何用css画三角形&太极

一、如何用css画一个三角形

搜索学习资源：Google >>css tricks shape

>> 画一个如下图这样的三角形

三角形

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

  
  
  



  
 


  
道生一，一生二，二生三，三生万物 ——《道德经》

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