开发中实用CSS干货总结（一）CSS实现上、下、左、右三角箭头

最新推荐文章于 2024-03-05 10:54:19 发布
最新推荐文章于 2024-03-05 10:54:19 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： web前端 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caicai1171523597/article/details/86642550
版权

在开发中，三角箭头是很常见的icon，很多时候不需要UI提供切图我们可以自己用几行代码写出来，利用div的边框旋转或者使用伪元素的边框旋转，以下通过几种不同的方法绘制。
1.空心线条箭头

 
 
13079544-a0eda6c1fd6bcbd0.png
效果图 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /**上箭头：利用div的边框旋转*/
        .arrow-top{
            margin-top: 32px;
            margin-left: 20px;
            width: 10px;
            height: 10px;
            border-top: 1px solid #757575;
            border-right: 1px solid #757575;
            transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        }
        /*右箭头：利用css伪类:after旋转*/
        .arrow-right:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 50px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px; height: 10px;
            transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        /*rotate(-45deg)等同于矩阵转换matrix(0.71, 0.71, 0.71, -0.71, 0, 0)*/
            /*transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);*/
        }
        /*下箭头：利用css伪类:after与矩阵*/
        .arrow-bottom:after {
            content: "";
            position: absolute;
            top: 6px;
            left: 100px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px;
            height: 10px;
            transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        }
        /*左箭头：利用css伪类:after与矩阵*/
        .arrow-left:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 150px;
            margin: 20px;
            border-right: 1px solid #757575;
            border-bottom: 1px solid #757575;
            width: 10px;
            height: 10px;
            transform: matrix(-0.71,-0.71, -0.71, 0.71, 0, 0)
        }
    </style>
</head>
<body>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-bottom"></div>
<div class="arrow-left"></div>
</body>
</html>

2.实心箭头

 
 
13079544-fbac40c346290822.png
效果图 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .arrow {
            position: relative;
            margin:100px auto;
            width:300px;
            height: 150px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .arrow li{
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid #333;
            list-style: none;
        }
        /*上箭头*/
        .arrow li.top{
            top: 20px;
            left: 10px;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /*右箭头*/
        .arrow li.right{
            top: 20px;
            left: 60px;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
        }
        /*下箭头*/
        .arrow li.bottom{
            top: 26px;
            left: 110px;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /*左箭头*/
        .arrow li.left{
            top: 20px;
            left: 160px;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>
</head>
<body>
<ul class="arrow">
    <li class="top"></li>
    <li class="right"></li>
    <li class="bottom"></li>
    <li class="left"></li>
</ul>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

caicai1171523597
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css制作上下左右箭头
11-08
css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头 css制作上下左右箭头
Html5 css3 左箭头,CSS3 左右箭头（尖头括号）
weixin_29141505的博客
06-20 927
CSS语言：CSSSCSS确定html {background: lightgray;}body {position: absolute;top: 50%;left: 50%;width: 6rem;height: 3rem;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform...
css绘制右箭头“＞”
最新发布
到点睡觉了的博客
03-05 274
css绘制右箭头，可用于表单选择指示等。
用CSS3实现上下左右箭头
weixin_33868027的博客
09-04 958
225deg 向上箭头 135deg向下箭头45deg向右箭头 -45deg向左箭头
css3左右箭头
诸葛苍穹
11-06 4671
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /*width: 20px;*/ /*height: 20px;*/ /*border-top: 1px solid #f90;*/ /*bor
html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
weixin_39806388的博客
06-18 547
简要教程这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。【相关视频推荐：Bootstrap教程】安装可以通过npm或bower来安装该Bootstrap箭头按钮文件。npm install bootstrap-directional-buttonsbower install bootstrap-directio...
纯CSS实现箭头
09-27
纯CSS实现箭头 display: inline-block; margin: 72px; border-right: 24px solid; border-bottom: 24px solid; width: 120px; height: 120px; transform: rotate(-45deg);
css实现下箭头
weixin_30256901的博客
12-10 1309
css实现下箭头 .top { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #217AFF; } &lt...
Html5 css3 左箭头,利用CSS3特性巧妙实现漂亮的DIV箭头
weixin_39785970的博客
06-20 315
DIV箭头用于表现DIV内容的指向，是使用非常普遍的一种表现形式，例如新浪微博的消息转发：![](https://box.kancloud.cn/2016-08-02_57a05bce5c7df.gif)还有傲游网站的导航条：![](https://box.kancloud.cn/2016-08-02_57a05bce74be8.gif)像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的...
纯css实现向上箭头动画显示
LzzMandy的博客
08-10 1095
效果图: DOM: <div> <img src="http://pics4.baidu.com/feed/3801213fb80e7bec70739c1b83cebc3e99506b81.jpeg?token=de56394c09656ca554744bf001f2d130&s=D53AA375CD88745D882B156F0300E078"/> <div class="arr-box"> <div class="arr"&g
css向左箭头
12-09
这个就是用border写的左右上下箭头，一般是在对话框，表指向的时候用到，基本就相当于tips
html带箭头的直线(javaScript实现)
08-20
线条控制已经做了封装 var line = new Line(); 挂号的四个值代表x1、y1、x2、y2 x1,y1表示起始点坐标 x2、y2表示结束点坐标(有箭头的一边) line.drawArrowLine(10, 10, 10, 100); 删除线条 line.remove() 设置颜色 line.setColor(newColor)
DIV+CSS通过border样式制作带箭头提示框效果
01-19
带箭头样式的提示框，在很多的网站上都能见到这样的效果。通过自己动手写出来，觉得也不是什么难事。其实这个效果都是通过CSS中一个border样式就能做出来。归纳一下实现这个效果主要会用到border的这几个样式： border-style:边框的样式 border-color:边框的颜色 border-width:边框的宽度 先实现这样的一个效果，看了就明白是怎么回事了： 这段代码为： 复制代码代码如下: position:absolute; border-color:#00f #ff0 #0f0 #f0f; border-style:dashed dashed solid dash
css页面中常见左中右分栏布局的两种实现方式
09-25
页面左中右分栏布局在目前的网页布局中是比较常见的，下面就与大家分享两个不错的方法可以实现左中右分栏布局，代码很详细，需要的朋友可不要错过
纯CSS3实现多种(上下、左右、转弯)箭头绘制插件源码.zip
11-20
纯CSS3实现多种(上下、左右、转弯)箭头绘制插件源码.zip
详解css布局实现左中右布局的5种方式
09-24
主要介绍了详解css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3实现小箭头
css兼容浏览器的各种背景渐变
02-07 831
https://segmentfault.com/a/1190000002780453#articleHeader18 向上的箭头 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 向下的剪头 #triangle-down {
css 绘制 上，下，右，左箭头
m0_65730686的博客
09-06 3601
css 绘制 上，下，右，左箭头
css实现上下左右三角形
05-02
可以使用CSS的border属性来实现上下左右三角形，具体代码如下： 上三角形： ```css .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; } ``` 下三角形： ```css .triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid #ccc; } ``` 左三角形： ```css .triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #ccc; } ``` 右三角形： ```css .triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #ccc; } ``` 其中，50px为三角形的大小，#ccc为三角形的颜色。你可以根据需要调整这些值来实现不同大小、颜色的三角形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值