如何用css实现6宫格图标

程序员文章站 2022-04-22 08:49:19

...

<!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 >
      <p>
        <p class="test">
        </p>
      </p>
  </body>
</html>

以上就是如何用css实现6宫格图标的详细内容，更多请关注其它相关文章！