css伪类运用

2023-03-07 19:22:41

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS输出图形</title>
<style type="text/css">
.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}
.square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:2;
top:25%;
right:-28px;
border:15px solid #FFF;
border-color:transparent transparent transparent #FFF;
}
.square:after{content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:1;
top:25%;
right:-30px;
border:15px solid #FFF;
border-color:transparent transparent transparent #000;
}
.a{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
</style>
</head>
<body>

   <div class='square'></div>
   <div class="a"> </div>
</body>
</html>

码农公寓

相关文章