DIV+CSS学习 -- 太极图☯️

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
        #t1 {
               width: 100px;
               height: 100px;
               background: orange;
               border: 2px solid black;
               border-radius: 50px;
          }
        #t2 {
               width: 100px;
               height: 50px;
               border: 2px solid black;
               border-radius: 50px 50px 0px 0px;
          }
        #taiJiImage {
               width: 100px;
               height: 100px;
               background: white;
               border: 100px solid black;
               border-radius: 150px;
          }
        #taiJiBackImage {
               width: 300px;
               height: 600px;
               border: 1px solid black;
               border-left: 300px solid black;
               background: white;
               border-radius: 300px;
          }
        #taiJiBackImage::before {
               content: '';
               display: block;
               width: 100px;
               height: 100px;
               background: white;
               border: 100px solid black;
               border-radius: 150px;
               margin-left: -150px;
          }
        #taiJiBackImage::after {
               content: '';
               display: block;
               width: 100px;
               height: 100px;
               background: black;
               border: 100px solid white;
               border-radius: 150px;
               margin-left: -150px;
          }
    </style>
</head>
<body>
    <div id="t1"></div>
    <div id="t2"></div>
    <div id="taiJiImage"></div>
    <div id="taiJiBackImage"></div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容