zoukankan      html  css  js  c++  java
  • CSS3 用border写 空心三角箭头 (两种写法)

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

    1. 第一种写法 利用常见的 after伪元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .arrow {
                     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;
                     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>
    1. 第二种写法相对于比较简单

    <!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;
                     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>
  • 相关阅读:
    2021.5.10-(叶子相似的树)
    2021.5.8-N皇后(回溯)
    2021.5.6-(雪糕最大数)
    2021.4.23刷题(回溯-全排列)
    可持久化动态图上树状数组维护01背包
    Infinite String Comparision
    第6章 操作系统 存储器管理(二)
    markdown
    操作系统 第6章 存储管理(一)
    操作系统 第五章 死锁 (二)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12914926.html
Copyright © 2011-2022 走看看