边框的四个角
2020-03-11 本文已影响0人
思念LY
1.png
引入fa 字体库，通过选择四个箭头图标实现四个角的效果，都是字体，大小样式可调节,不用图片加载快，循环起来无压力
<!DOCTYPE html>
<html>
<head>
<title>边框的四个角</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="item">
<div class="name"><span>我是中心点</span></div>
<i class="fa fa-angle-down item-up"></i>
<i class="fa fa-angle-down item-down"></i>
<i class="fa fa-angle-down item-up1"></i>
<i class="fa fa-angle-down item-down1"></i>
</div>
</body>
</html>
<style type="text/css">
body {
background: #000;
}
.item {
width: 100px;
height: 100px;
position: relative;
color: #fff;
background: #0d1c87;
}
.name {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.item-up {
position: absolute;
left: -3px;
top: -5px;
color: #ff0;
transform: rotate(135deg);
font-size: 16px;
}
.item-down {
position: absolute;
left: -3px;
bottom: -5px;
color: #ff0;
transform: rotate(45deg);
font-size: 16px;
}
.item-up1 {
position: absolute;
right: -3px;
top: -6px;
color: #ff0;
transform: rotate(225deg);
font-size: 16px;
}
.item-down1 {
position: absolute;
right: -4px;
bottom: -5px;
color: #ff0;
transform: rotate(-45deg);
font-size: 16px;
}
</style>
