欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS3 用border寫 空心三角箭頭 (兩種寫法)

  發(fā)布時(shí)間：2017-09-29 16:26:20   作者：Bing   我要評(píng)論
本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

之前一直在尋找這種空心三角箭頭, 終于知道了原理! 自己記錄一下,順便分享給之前跟我一樣想要的擼友們~

第一種寫法 利用常見(jiàn)的 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>

第二種寫法相對(duì)于比較簡(jiǎn)單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*簡(jiǎn)單*/
            .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);
                /*不加這兩個(gè)屬性三角會(huì)比上一個(gè)略丑, 大家可以試一下*/
                border-left: 2px solid transparent;
                border-bottom: 2px solid transparent;
            }
        </style>
    </head>
    <body>
        <div class="wb_arrow"></div>
    </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS實(shí)現(xiàn)空心尖角的示例代碼

    web開(kāi)發(fā)中，三角形指示箭頭最為常見(jiàn)，本文就來(lái)介紹了CSS實(shí)現(xiàn)空心尖角的示例代碼，具有一定的參考價(jià)值，感興趣的可以了解一下
    2023-11-22

最新評(píng)論