太极八卦（伪元素的简单使用）-原创手记-慕课网

太极八卦（伪元素的简单使用）

我不想一直是小白 2016-10-03 15:47:00 浏览 2257

我不想一直是小白

关注TA

手记 2

粉丝 0

获赞 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      * {
        padding: 0px;
        margin: 0px;
      }

      .box {
        width: 300px;
        height: 600px;
        border: 1px solid black;
        border-left: 300px solid black;
        border-radius: 300px;
        margin: 0 auto;
      }

      .box::before {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background: white;
        border: 100px solid black;
        border-radius: 150px;
        margin-left: -150px;
      }

      .box::after {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background: black;
        border: 100px solid white;
        border-radius: 150px;
        margin-left: -150px;
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

相关标签: Html/CSS

0人推荐

发表评论