<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css画空心箭头</title>
<style>
.hot-point-title {
width: 30px;
height: 38px;
border:1px solid #999;
position: relative;
}
.hot-point-title .arrow {
position: absolute;
right: -12px;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
/*background:#fafafa;*/
}
.hot-point-title .arrow em,.hot-point-title .arrow span {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-color: rgba(255,255,255,0);
border-color: transparent\0;
*border-color: transparent;
_border-color: tomato;
_filter: chroma(color=tomato);
border-style: solid;
overflow: hidden;
*zoom: 1;
border-width: 6px 0 6px 6px;
}
.hot-point-title .arrow em {
left: 1px;
border-left-color: #999;
}
.hot-point-title .arrow span {
border-left-color: #fff
}
</style>
</head>
<body>
<div class="hot-point-title">
<div class="arrow">
<em></em>
<span></span>
</div>
</div>
</body>
</html>
css画空心箭头
最新推荐文章于 2024-05-13 09:53:40 发布