css 实现6宫格图标

最新推荐文章于 2024-06-22 23:09:06 发布

shunzizhan

最新推荐文章于 2024-06-22 23:09:06 发布

阅读量5.4k

点赞数

分类专栏： web前端技术文章标签： css样式

本文链接：https://blog.csdn.net/u011613356/article/details/46820413

版权

web前端技术专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Unicorn Admin</title>
    <meta charset="UTF-8" />
    <style type="text/css" media="screen">
      .test{
        width:100px;
        height: 100px;
        background-color: gray;
      }
      .test:after{
        content: "";
        display: block;
        width: 100%;
        height: 33.3%;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        margin-top: -66.6%;
      }
      .test:before{
        content: "";
        display: block;
        width: 33%;
        height: 100%;
        border-right: 2px solid white;
      }
    </style>
</head>
<body >
      <div>
        <div class="test">
        </div>
      </div>
</body>
</html>