详解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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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
URL Rewrite的设置方法
2007/01/02 PHP
第四章 php数学运算
2011/12/30 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
react-router中的属性详解
2017/06/01 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python中的self用法详解
2019/08/06 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
门卫人员岗位职责
2013/12/24 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
政审证明材料
2015/06/19 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript