Community

Learn

Tools Library

AI Tools

Leisure

English

Home > Web Front-end > CSS Tutorial > How to use css to implement a 6-square grid icon

How to use css to implement a 6-square grid icon

巴扎黑

Release： 2017-03-30 14:43:45

Original

3306 people have browsed it

<!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>

Copy after login

The above is the detailed content of How to use css to implement a 6-square grid icon. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css，6宫格图标

source：php.cn

Previous article：How to write triangles in css Next article：How to use CSS for web page layout

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn