css实现箭头

关注

原创最新推荐文章于 2026-07-11 16:25:02 发布 496 阅读 AI 写同款· GEO 优化 ›

用CSS实现箭头在WEB开发中，POPUP和tooltip经常要用到类似的箭头，http://cssarrowplease.com/ 网站可以帮助我们自动生成对应的CSS代码。下面主要阐述一下CSS实现箭头的原理上面的HTML代码将产生如下的效果根据ID指定CSS的width和height属性，然后加入10px的黑色border 如果将这个DIV的面积缩小，width和hei 阅读详情

边框箭头

.arrow1{
    position: relative;
}
.arrow1::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 12px;
    width: 12px;
    transform-origin: 25% 25%;
    border-width: 2px 0 0 2px;
    border-color: #999;
    border-style: solid;
    transform: translate(-25%, -25%) rotate(45deg);
}

通过调整宽高，以及旋转角度来实现不同大小方向的箭头，箭头位置需要调节定位位置（旋转中心以及平移位置尽量少修改）

实体箭头

.arrow2{
    position: relative;
}
.arrow2::after{
    content: '';
    height: 0;
    width: 0;
    border-width: 6px;
    border-color: #999 transparent transparent;
    border-style: solid;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -25%);
}