ASCII码 ASCII码

0510太极图作业

发布于：2022-05-17 10:49:00  栏目：技术文档

一、效果图

二、思路

  1. 通过border-radius: 50%来实现container画圆
  2. 通过伪代码before中以left和top、after中以right和top定位到对应圆心进行二次画圆及涂色即可实现

三、源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>太极图</title>
  6.     <style>
  7.         .container{
  8.             width: 96px;
  9.             height: 48px;
  10.             border-radius: 50%;
  11.             border: 2px solid #000;
  12.             margin: 0 auto;
  13.             position: absolute;
  14.             border-bottom: 50px solid #000;
  15.         }
  16.         div:before{
  17.             content: "";
  18.             position: absolute;
  19.             left: 0;top: 50%;
  20.             width: 8px;
  21.             height: 8px;
  22.             background: #000;
  23.             border: 20px solid #fff;
  24.             border-radius: 50%;
  25.         }
  26.         div:after{
  27.             content: "";
  28.             position: absolute;
  29.             right: 0;
  30.             top: 50%;
  31.             width: 8px;
  32.             height: 8px;
  33.             background: #fff;
  34.             border: 20px solid #000;
  35.             border-radius: 50%;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="container"></div>
  41. </body>
  42. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行