详解CSS3 用border写 空心三角箭头 (两种写法)
195 浏览量
2020-09-27
21:32:35
上传
评论
收藏 34KB PDF 举报
详解详解CSS3 用用border写写 空心三角箭头空心三角箭头 (两种写法两种写法)
本篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
资源评论
weixin_38598213
- 粉丝: 2
- 资源: 854
最新资源
- 312749069629470selfieU重绘.apk
- http%3A%2F%2Fimg.wsdl.vivo.com.cn%2Fappstore%2Fdeveloper%2Ficon%2F201412%2F201412231038336
- 主要记录B站up主莫烦matplotlib教程中的代码.zip
- Java SE Development Kit 8u411 Windows x64 Installer
- Java SE Development Kit 11.0.23 Windows x64 Installer
- 毕业设计-后端项目-网站民宿展示网站SSM
- 基于python绘图，程序详细展示了绘图过程中详尽的命令语句，使得图片达到可发表程度 .zip
- Java SE Development Kit 11.0.23 macOS x64 DMG Installer
- Java SE Development Kit 11.0.23 macOS ARM64 DMG Installer
- python matplotlib 可视化编程.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
