web页面左右双向箭头(利用CSS样式和图片)——20181130

最新推荐文章于 2025-06-13 11:01:33 发布

sunshine102548

最新推荐文章于 2025-06-13 11:01:33 发布

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/sunshine102548/article/details/84644910

本文介绍了如何使用CSS样式和图片来创建web页面上的左右双向箭头，通过三种不同的显示效果，包括纯CSS样式实现和结合图片参考百度地图的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、显示效果：（CSS样式）

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
<style>
.arrowLeft{                        /*整个箭头容器*/
	width:40px;
    height:10px;
    display: inline-block;
    position: relative;             /*相对定位*/
}
.arrowLeft:before,.arrowLeft:after{
    content: '';
    border-color: transparent;       /*伪元素边框颜色为透明*/
    border-style: solid;
    position: absolute;               /*伪元素绝对定位*/
}
.arrowLeft:after{                   /*箭头尾部的矩形*/
    width: 60%;
    height: 2%;
    background-color:#D3D3D3;
    top: 5px;
    left: 0;
}
.arrowLeft:before{                 /*箭头三角形*/
    border-right-color:#D3D3D3;
    border-width: 7px;/*箭头的大小*/