空闲占位符X css实现

最新推荐文章于 2022-06-22 15:28:13 发布

weixin_34408624

最新推荐文章于 2022-06-22 15:28:13 发布

阅读量124

点赞数

文章标签： python

原文链接：https://my.oschina.net/xuqiang/blog/1544252

版权

2019独角兽企业重金招聘Python工程师标准>>>

空闲占位符X css实现

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    #root {
      width: 100px;
      height: 45px;
      background-color: #eeeeee;
      position: relative;
    }

    #root::after, #root::before {
      position: absolute;
      content: " ";
      width: 101%;
      height: 3px;
      top: 20px;
      background-color: #999999;
    }

    #root::after {
      transform: rotate(21deg);
    }

    #root::before {
      transform: rotate(-21deg);
    }
  </style>
</head>
<body>

  <div id="root"></div>

</body>
</html>

效果如下图：输入图片说明