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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .arrow {
  8.                 width: 20px;
  9.                 height: 4px;
  10.                 margin: 0 auto 7px;
  11.                 border-left: 4px solid transparent;
  12.                 border-right: 4px solid transparent;
  13.                 border-bottom: 4px solid #343c99;
  14.                 transform: rotate(45deg);
  15.                 transform-origin: left;
  16.             }
  18.             .arrow:after {
  19.                 content: '';
  20.                 display: block;
  21.                 width: 100%;
  22.                 height: 100%;
  23.                 border-left: 4px solid transparent;
  24.                 border-right: 4px solid transparent;
  25.                 border-top: 4px solid #343c99;
  26.                 position: absolute;
  27.                 right: -10px;
  28.                 top: -14px;
  29.                 transform: rotate(90deg);
  30.                 transform-origin: bottom;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div class="arrow"></div>
  36.     </body>
  37. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*简单*/
  8.             .wb_arrow{
  9.                 border-right: 2px solid #343c99;
  10.                 border-top: 2px solid #343c99;
  11.                 height: 10px;
  12.                 width: 10px;
  13.                 margin:50px auto 0;
  14.                 transform: rotate(deg);
  15.                 -webkit-transform: rotate(0deg);
  16.                 /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
  17.                 border-left: 2px solid transparent;
  18.                 border-bottom: 2px solid transparent;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div class="wb_arrow"></div>
  24.     </body>
  25. </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. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

  2. broken pipe 报错分析和解决办法

    参考资料: 1.博客1:https://blog.csdn.net/qq_37535749/article/details/113781338 2.博客2:https://blog.csdn.net/ ...

  3. （六）React Ant Design Pro + .Net5 WebApi：后端环境搭建-EF Core

    一. 简介 EFCore 是轻量化.可扩展.开源和跨平台版的常用数据访问技术,走你(官方文档) 二. 使用 1.安装数据库驱动包.PMC 工具包 不同的数据库有不同的包,参考,我用 PostgreSQ ...

  4. MAT工具分析Dump文件（大对象定位）

    前段时间线上服务经常发生卡顿,经过排查发现是大对象引起的Fullgc问题,特此记录排查逻辑. 目录 目的 一.获得服务进程 二.生成dump文件 三.下载mat工具 四.使用mat工具导入第二步生成的 ...

  5. Linux 磁盘inode字节数占满的问题

    查看ext系列文件系统的信息 #dumpe2fs /dev/sdc1 Inode count: 65536 inode号数量 Block count: 262144 块数量 Reserved bloc ...

  6. 解决github网站打不开的方法

    发现github最近经常抽风,之前发现打不开时就挂个梯子,最近梯子也都被封了,尝试了下改host发现效果挺好,方法如下(Mac电脑): 1.通过站长工具找出DNS地址:进入站长工具网站的域名解析网址: ...

  7. tensorflow源码解析之common_runtime-device

    目录 核心概念 device device_factory device_mgr device_set 1. 核心概念 在framework部分,我们介绍了DeviceAttributes和Devic ...

  8. Spring-MyBatis的配置文件

    <?xml version="1.0" encoding="UTF8"?> <beans xmlns="http://www.spr ...

  9. 获取ajax动态加载的多个a标签中的 点击的那个a标签对应的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. P1030

    题面 给出一棵二叉树的中序排列与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度≤8). 输入格式 2行,均为大写字母组成的字符串,表示一棵二叉树的中序排列与后序排列. 输出格式 1 ...