之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

  1. 第一种写法 利用常见的 after伪元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .arrow {

                width: 20px;

                height: 4px;

                margin: 0 auto 7px;

                border-left: 4px solid transparent;

                border-right: 4px solid transparent;

                border-bottom: 4px solid #343c99;

                transform: rotate(45deg);

                transform-origin: left;

            }

            .arrow:after {

                content: '';

                display: block;

                width: 100%;

                height: 100%;

                border-left: 4px solid transparent;

                border-right: 4px solid transparent;

                border-top: 4px solid #343c99;

                position: absolute;

                right: -10px;

                top: -14px;

                transform: rotate(90deg);

                transform-origin: bottom;

            }

        </style>

    </head>

    <body>

        <div class="arrow"></div>

    </body>

</html>

  1. 第二种写法相对于比较简单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*简单*/

            .wb_arrow{

                border-right: 2px solid #343c99;

                border-top: 2px solid #343c99;

                height: 10px;

                width: 10px;

                margin:50px auto 0;

                transform: rotate(deg);

                -webkit-transform: rotate(0deg);

                /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/

                border-left: 2px solid transparent;

                border-bottom: 2px solid transparent;

            }

        </style>

    </head>

    <body>

        <div class="wb_arrow"></div>

    </body>

</html>

CSS3 用border写 空心三角箭头 (两种写法)的更多相关文章

  1. css指示箭头两种实现方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）

    文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...

  4. java 路径分隔符File.separator 以及 路径两种写法"/"和"\\"

    一.File.separator File file=new File(); 这句是新建一个文件.file.separator这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...

  5. iOS中表视图单元格事件用nib和storyboard的两种写法总结

    从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...

  6. ThinkPHP中Widget的两种写法及调用

    Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...

  7. es6对象内函数的两种写法

    es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...

  8. 关于MyBatis的两种写法

    刚接触MyBatis是在Jike的视频中学习的,但是之后又发现和项目中的MyBatis的用法不太一致.上网找了好多资料,发现网上的教程分为两种写法: 第一种,是jike视频中的写法,写好map.xml ...

  9. Python 自定义元类的两种写法

    有关元类是什么大家自己搜索了解,我这里写一下实现元类的两种写法 # 自定义元类 #继承type class LowercaseMeta(type): ''' 修改类的属性名称为小写的元类 ''' # ...

随机推荐

  1. appium1-macOS10.12下如何丝滑的使用appium?

    1.下载或者更新Homebrew:homebrew官网 macOS 不可或缺的套件管理器 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githu ...

  2. LeetCode-103-二叉树的锯齿形层序遍历

    二叉树的锯齿形层序遍历 题目描述:给定一个二叉树,返回其节点值的锯齿形层序遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 示例说明请见LeetCode官网. 来源:力 ...

  3. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  4. 微信小程序码生成及canvas绘制

    吐槽:某厂的开发文档写的跟屎一样 1.后台返回accessToken,小程序请求获取小程序码 uni.request({ url: 'https://api.weixin.qq.com/wxa/get ...

  5. NSView subview blocking drag/drop event

    原文链接 近期在Mac项目中有一个处理鼠标拖拽事件的需求, 大致处理流程是这样的: 从 NSView 继承得到一个子类 覆盖处理拖拽事件相关方法 注册拖拽事件 开始的时候一切都很正常,直到某次发现拖拽 ...

  6. 关于mysql8.0 caching_sha2_password和sha256_password认证方式

    今天开发上线新系统反馈数据库连接有问题.自己分别在命令行下及navicat进行连接发现,发现root用户密码在命令行下可以正常连接,但是新建立的子用户连接不上.于是就换成管理员密码.立即就连接上了.看 ...

  7. 15、mysql主从复制的原理

    mysql主从复制 要想实现mysql的主从复制需要先了解二进制日志(bin log)和中继日志(relay log). 二进制日志(bin log) binlog即binary log,二进制日志文 ...

  8. CF1117G题解

    题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...

  9. django的request对象方法初识

    1:request.post 拿到的是post请求发送过来的数据,可以将其看作是一个个的键值对 使用get方法可以通过key拿到值,如果该值是一个列表的话,get方法只能拿到列表的最后一个值,使用ge ...

  10. 安装ncclient出现rust版本不对问题解决

    在windows上安装ncclient的时候,出现了提示说rust版本需要至少1.14.0以上版本 解决办法: 在https://www.rust-lang.org/tools/install下载新版 ...