css 實現6宮格圖示
阿新 • • 發佈：2019-02-09
<!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>
<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>