利用css中的border绘制图形
2019-06-24 本文已影响0人
newway_001
<!DOCTYPE html>
<html>
<head>
<style>
a{
display:block;
width:120px;
height:120px;
border:1px solid;
position:relative;
color:green;
}
a:before{
content:'';
width:60px;
height:60px;
position:absolute;
border-top:6px solid;
top:57px;
left:30px;
}
a:after{
content:'';
width:60px;
height:60px;
position:absolute;
left:57px;
top:30px;
border-left:6px solid;
}
a:hover{
color:red;
}
</style>
</head>
<body>
<a></a>
</body>
</html>
image.png
以上用到了3个技巧：
1：position：absolute；
相对于 static 定位以外的第一个父元素进行定位。
所以a需要加一个position:relative;
2： ：before和:after会继承可继承的属性值；例如颜色和display；悬停的时候，color颜色改变，伪元素颜色也会随之改变；
3：:before和:after必须有content，否则不显示；
