大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

2018-09-04画太极

第一种方法:笨方法 不停画圆即可实现。

HTML部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="YinYang">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>
</body>
</html>

Css部分

body{
  background-color: #444;
}
#YinYang{
  width:200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 100%);
  position: relative;
  margin:100px auto;
}

#YinYang > .one{
   
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: black;
  position: absolute;
  top:50px;
}

#YinYang > .two {
  width:100px;
  height: 100px;
  background: white;
  position: absolute;
  top:50px;
  left:100px;
  border-radius: 50%;
  
}
#YinYang > .three  {
  border: 1px solid black;
  width:25px;
  height:25px;
  background: white;
  position: absolute;
  top:85px;
  border-radius:50%;
  left:35px;
  
}
#YinYang > .four{
  border: 1px solid black;
  width:25px;
  height:25px;
  background: black;
  position: absolute;
  top:85px;
  border-radius:50%;
  left:140px;
  
}

效果图:

太极.png

第二种方法:利用伪类 before 和 after 。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div id="YinYang">
 
</div>
</body>
</html>
#YinYang  {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#YinYang::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#YinYang::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}