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

  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. c语言刷 设计题合计

    355. 设计推特 #define MAX_LEN 512 struct User { int userId; int followee[MAX_LEN]; // 散列表,0/1,1表示这个user被 ...

  2. Dubbo服务如何优雅的校验参数

    一.背景 服务端在向外提供接口服务时,不管是对前端提供HTTP接口,还是面向内部其他服务端提供的RPC接口,常常会面对这样一个问题,就是如何优雅的解决各种接口参数校验问题? 早期大家在做面向前端提供的 ...

  3. JZ-017-树的子结构

    树的子结构 题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 题目链接: 树的子结构 代码 /** * 标题:树的子结构 * 题目描述 * 输入两棵 ...

  4. Centos8 下部署 ASP.net Core 程序

    1.安装需要的SDK包,如果程序包含3.1版本,需要安装3.1的SDK. sudo dnf install dotnet-sdk-5.0dotnet --versiondotnet --list-ru ...

  5. xxl-job踩坑记录——执行器，执行10分钟自动失败

    问题描述 上一篇Docker 部署xxl-job 报错:xxl-rpc remoting error(connect timed out), for url : xxxxxx - 这行代码没Bug - ...

  6. 如何使用Java AWT 创建一个简易计算器

    摘要:手把手教你使用 Java AWT 创建一个简易计算器. 本文分享自华为云社区<手把手教你使用 Java AWT 创建一个简易计算器>,作者:海拥 . 关于AWT AWT (抽象窗口工 ...

  7. 获取bing首页的每日一图

    从必应(bing)首页抓取他的每日一图 以前上学时,曾经用python写过一个每天抓取bing每日一图的小工具. 现在想用java来重构一下. 抓取图片的思路 首先获取网页源码 从网页源码中,我们可以 ...

  8. RENIX 软件RAW流发送——网络测试仪实操

    本文主要介绍了RENIX软件如何进行RAW流发送操作.文章通过预约端口.添加RAW流.修改负载.发送流量.查看流统计.数据包捕获六个步骤详细介绍了操作过程. 步骤一:预约端口.1.先安装RENIX软件 ...

  9. CentOS7部署Bind

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 1.简介 DNS(Domain Name System),域名系统,因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问 ...

  10. http请求中的三种参数类型

    1.URL参数:实际就是querry string的方式,参数拼接在url之后以?隔开,参数之间以&连接. 优点:简单,页面跳转比较快. 缺点:1.基于浏览器对urk长度有限制,不能超过204 ...