空心，实心箭头制作（正方形的绝对定位实现）

最新推荐文章于 2024-03-16 14:56:07 发布

子君不语

最新推荐文章于 2024-03-16 14:56:07 发布

阅读量668

点赞数

分类专栏： css 文章标签： css 三角形

本文链接：https://blog.csdn.net/u010174173/article/details/47294409

版权

css 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#triangle-up {
display:inline-block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

}

.s,

.s tt{ width:0; height:0; line-height:0; font-size:0;

border:6px solid red;

border-color:transparent red transparent transparent;

position:absolute;}

.s{ left:10px; top:10px;}
.s tt{ border-right-color:#FCF6F0; right:-8px; top:-6px;}

.mini_info{
display: inline-block;
}
.mini_info i{

width:0; height:0;

border-width:4px;

border-style:solid;

border-color:#999 #FFF #FFF #FFF;

font-size:0; line-height:0;

color:#999; overflow:hidden; position:absolute; top:11px; left: 100px;
}

.four{
display: inline-block;
}
.four i{
width:0; height:0;
border-width:8px 8px 8px 0;
border-style:solid solid solid none;
border-color:transparent #ccc transparent;
font-size:0; line-height:0;
color:#999; overflow:hidden; position:absolute; top:30px; left: 100px;
}
/*
一个正方形的绝对定位背景色与父类一样
*/
.f_gxtz{
position: relative;
background:#FFE9C8;
width: 100px;
height: 54px;
display: inline-block;
padding: 5px;
}
.f_gxtz span{
background-color:#FFE9C8;
width: 10px;
height: 10px;
display: inline-block;
position:absolute;
top:59px;
left:25px;
transform:rotate(45deg);
}

/*
空心箭头
通过两个背景色的正方形绝对定位相差1px覆盖实现
*/
.item {
display: inline-block;
}
.item span{
display: inline-block;
background:#fff;
border: 1px solid #FEC3A8;
border-radius: 2px 2px 2px 2px;
line-height: 50px;
margin-top: 5px;
padding: 2px 5px;
position: relative;
width: 78px;
height: 50px;
}
.item span b,.item span i {
position:absolute;
display: inline-block;
left:37px;
width:7px;
height:7px;
font:16px/21px Simsun;
overflow:hidden
}
.item span b{
background-color:#FEC3A8;
transform:rotate(45deg);
top:-5px;
}
.item span i{
background-color:#fff;
transform:rotate(45deg);
top:-4px;
}
</style>
</head>
<body>
<div id="triangle-up"></div>
<div class="s">
<div class="tt"></div>
</div>
<div class="mini_info">
<i></i>
</div>
<div class="four">
<i></i>
</div>
<div class="f_gxtz">
更新通知我
<span></span>
</div>
<div class="item">
<span>
<b></b>
<i></i>
最强比价
</span>
</div>
</body>
</html>