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): ''' 修改类的属性名称为小写的元类 ''' # ...
随机推荐
- Pandas：plot相关函数
0.注意事项 及 各种错误 1)绘制bar图时,如果出现重复的x值被合并到一个情况(导致X轴应该显示内容有缺失),可能是由于Pandas版本太低: 2)无法设置中文title,在代码中加入两句话: p ...
- Python：Scrapy（一） 基础知识与实例
学习自: Scrapy爬虫框架教程(一)-- Scrapy入门 - 知乎 Scrapy爬虫框架,入门案例(非常详细)_ck784101777的博客-CSDN博客_scrapy爬虫案例 爬虫框架Scra ...
- MailKit和MimeKit 收发邮件
新建项目,引用MailKit和MimeKit NuGet包 using CommonTool.MailKit; using System; using System.Collections.Gener ...
- 如何在windows下成功的编译和安装python组件hyperscan
摘要:hyperscan 是英特尔推出的一款高性能正则表达式引擎,一次接口调用可以实现多条规则与多个对象之间的匹配,可以支持多种匹配模式,块模式和流模式,它是以PCRE为原型开发,并以BSD许可证开源 ...
- Chapter03 Java变量
Chapter03 变量 目录 Chapter03 变量 3.1 为什么需要变量 3.1.1 一个程序就是一个世界 3.1.2 变量是程序的基本组成单位 3.1.3 简单原理图 3.2 变(变化)量( ...
- JZ-016-合并两个排序的链表
合并两个排序的链表 题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 题目链接: 合并两个排序的链表 代码 /** * 标题:合并两个排序的链表 ...
- 微信小程序yansongda 支付宝测试
小程序支付接入文档 1:php 框架composer 安装yansongda插件 composer require yansongda/pay:^2.10 -vvv 2:支付宝沙箱支付获取自己Appi ...
- CF708C题解
挺简单的一道数据结构... 首先考虑这个"改造"的本质,很明显是把一颗子树塞到了另一个节点下面. 考虑一个节点可能成为重心的条件.条件很明显是只有一颗子树的大小大于 \(\frac ...
- 详解java接口interface
引言 接口这个词在生活中我们并不陌生. 在中国大陆,我们可以将自己的家用电器的插头插到符合它插口的插座上: 我们在戴尔,惠普,联想,苹果等品牌电脑之间传输数据时,可以使用U盘进行传输. 插座的普适性是 ...
- 高级IO模型之kqueue和epoll
目录 简介 block IO和nonblocking IO IO多路复用和select poll epoll kqueue epoll和kqueue的优势 简介 任何一个程序都离不开IO,有些是很明显 ...