为了账号安全,请及时绑定邮箱和手机立即绑定

太极八卦(伪元素的简单使用)

标签:
Html/CSS
<!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>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消