CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~
第一种写法 利用常见的 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>第二种写法相对于比较简单
<!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写 空心三角箭头 (两种写法)的更多相关文章
- css指示箭头两种实现方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 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. 基础知 ...
- java 路径分隔符File.separator 以及 路径两种写法"/"和"\\"
一.File.separator File file=new File(); 这句是新建一个文件.file.separator这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...
- iOS中表视图单元格事件用nib和storyboard的两种写法总结
从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- es6对象内函数的两种写法
es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...
- 关于MyBatis的两种写法
刚接触MyBatis是在Jike的视频中学习的,但是之后又发现和项目中的MyBatis的用法不太一致.上网找了好多资料,发现网上的教程分为两种写法: 第一种,是jike视频中的写法,写好map.xml ...
- Python 自定义元类的两种写法
有关元类是什么大家自己搜索了解,我这里写一下实现元类的两种写法 # 自定义元类 #继承type class LowercaseMeta(type): ''' 修改类的属性名称为小写的元类 ''' # ...
随机推荐
- IIS部署vue项目页面刷新404,url重写问题解决办法
这里需要用到URL重写工具 --URL Rewrite(默认没有,需要自己下载安装) 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开IIS在管理 ...
- 从零开始，开发一个 Web Office 套件（7）：新的问题—— Click 事件的 z-index
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- JZ-053-表示数值的字符串
表示数值的字符串 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123", ...
- Golang开源流媒体服务器（RTMP/RTSP/HLS/FLV等协议）
一. lal 简介 lal是开源直播流媒体网络传输项目,主要由三部分组成: lalserver:流媒体转发服务器.类似于nginx-rtmp-module等服务,但支持更多的协议,提供更丰富的功能. ...
- think php 登录 （session+验证码）
..........表单页面 <!DOCTYPE html> {__NOLAYOUT__} <html lang="en"> <head> &l ...
- PHP中http_build_query函数×tamp自动转化为×的解决办法
出现这个原因只是在浏览器上显示的问题,右键查看源代码是没有问题的. 如果不想的看到只要让代码在显示在浏览器之前替换掉就可以了 /** * url地址参数 * @param $arr * @return ...
- 题解 CF17E 【Palisection】
卡空间PAM,2010没有PAM,所以都是马拉车 众所周知,PAM拥有十分优秀的时间复杂度,但空间复杂度lj得不行 但这题卡空间,所以得用到邻接链表PAM 先讲思路 题目要求相交的回文子串对,这很难做 ...
- PAM学习小结
PAM 目录 PAM 功能: 回文树 Fail指针 Trans指针 构建PAM 应用 P5496[模板]回文自动机(PAM) P4287[SHOI2011]双倍回文 P4555[国家集训队]最长双回文 ...
- Linux服务器 I/O 原理和流程
计算机I/OI/O在计算机中指Input/Output,IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一.IOPS是指单位时间 ...
- 朴素版Dijkstra
我们之前介绍的求最短路问题,我们通常会考虑到用BFS算法计算,这里我们将这样对于求最短路问题用不同的算法进行分类: 思路介绍:Dijkstra算法的思路究竟是怎么样的,我们这里先介绍一下朴素版Dijk ...