详解CSS3 用border写 空心三角箭头 (两种写法)


Posted in HTML / CSS onSeptember 29, 2017

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

第一种写法 利用常见的 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 #HTML / CSS
CSS3轻松实现圆角效果
Nov 09 #HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 #HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
You might like
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
js函数调用的方式
2014/05/06 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python易忽视知识点小结
2015/05/25 Python
python检查指定文件是否存在的方法
2015/07/06 Python
Python中的集合类型知识讲解
2015/08/19 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python实现飞机大战项目
2020/03/11 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
元旦晚会感言
2014/03/12 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
医德医风演讲稿
2014/05/20 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL