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

日期:2021-03-18 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

以前1直在找寻这类空心3角箭头, 终究了解了基本原理! 自身纪录1下,顺带共享给以前跟我1样要想的撸友们~

第1种写法 运用普遍的 after伪元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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: ⑴0px;
                top: ⑴4px;
                transform: rotate(90deg);
                transform-origin: bottom;
            }
        </style>
    </head>
    <body>
        <div class="arrow"></div>
    </body>
</html>

第2种写法相对较为简易

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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);
                /*不加这两个特性3角会比上1个略丑, 大伙儿能够试1下*/
                border-left: 2px solid transparent;
                border-bottom: 2px solid transparent;
            }
        </style>
    </head>
    <body>
        <div class="wb_arrow"></div>
    </body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。