css画空心箭头

来源：互联网发布：元数据作用和意义编辑：程序博客网时间：2024/05/05 01:35

<!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>

0 0