如何用css画三角形&太极

作者: 阿小经 | 来源:发表于2018-11-02 15:56 被阅读3次

如何用css画三角形&太极
网页设计 - 收藏集 - 掘金
CSS画三角形、圆形、椭圆形总结
css 实现三角形箭头
【转】用CSS画各种形状(一)
如何用css画三角形
一行代码实现太极图(阴阳八卦)
css3开发商务滑动垂直侧边栏
CSS画太极图
css画三角形

一、如何用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);
  }
}/* 加旋转动画 */