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

2024-07-11 09:07:54

字体：大中小

来源：转载

供稿：网友

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到CSS教程频道。

上一篇：CSS :focus-within的具体使用

下一篇：CSS中提升优先级属性!important的用法问题总结