css畫圖「不定時持續更新」

最近項目有個側邊欄縮放的需求，用箭頭按鈕控制。藉此也查了一些，順道簡單記錄下來

1.實心箭頭：border

HTML:

<div class="slide-button">
      <span class="arrow"></span>
 </div>

CSS:

.arrow{
    display: block;
    border: 10px solid #FFF;
    border-left-color:#F00;
    width:1px;
}

https://blog.csdn.net/u013415...

2.線條箭頭：border+transform

HTML:

<div class="slide-button">
      <span class="arrow"></span>
  </div>

CSS:

.slide-button{
    width: 18px;
    height: 60px;
    background-color: rgba(191, 152, 115, 0.2);
    position: absolute;
    right: 0;
    top: 40%;
}


.arrow{
    display: inline-block;
    position: relative;
    width: 18px;
    height: 60px;
    margin: 0 auto;
}
.arrow::after{
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 0 2px 2px 0;
    border-color: #bf9873;
    border-style: solid;
    transform: rotate(135deg);
    transform-origin: center;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 1px;
}
.arrow:hover{
    transform: rotate(180deg);
    transform-origin: (left, top);
    transition:all .5s ease-in .1s;
}

或是把transform: rotate(135deg)改成transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0)也是可行的，沒有詳細比較二者區別。不過本人是感受rotate用起來好理解一些。

3.banner兩頭的箭頭

一個三角形重疊另外一個三角形（一個設置顏色，另外一個設置爲背景色），而後用絕對定位露出一點點的，這樣就造成了箭頭了。

HTML：

<div class="arrowbox">
        <span class="arrow right">
            <span class="rightarrow1"></span><span class="rightarrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow left">
            <span class="leftarrow1"></span><span class="leftarrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow top">
            <span class="toparrow1"></span><span class="toparrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow bottom">
            <span class="bottomarrow1"></span><span class="bottomarrow2"></span>
        </span>
    </div>
</body>
</html>

<style>
            *{
                margin:0;
                padding: 0;
            }
     
            .arrowbox{
                width: 30px;
                height: 100px;
                background-color: #ddd;
                position: relative;
                margin-top: 10px;
            }
     
            .arrow{
                display: block;
                width: 10px;
                height: 10px;
            }
            .right,.left,.top,.bottom{
                position: absolute;
                top:45px;
                left: 0;
            }
            
            .rightarrow1,.rightarrow2{
                border-top:10px transparent dashed;
                border-right: 10px transparent dashed;
                border-bottom: 10px transparent dashed;
                border-left: 10px solid blue;
                position: absolute;
                top: 0;
                left: 0;
            }
            .rightarrow1{
                left: 2px;
                border-left:10px solid blue;
            }
     
            .rightarrow2{
                border-left: 10px solid    #ddd;
            }
     
            .right{
                left: 6px;
            }
     
            .leftarrow1,.leftarrow2{
                border-top:10px transparent dashed;
                border-right: 10px solid blue;
                border-bottom: 10px transparent dashed;
                border-left: 10px transparent dashed;
                position: absolute;
                top: 0;
                left: 0;
            }
            .leftarrow1{
                left: -2px;
                border-right: 10px solid blue;
            }
            .leftarrow2{
                border-right:10px solid #ddd; 
            }
            .left{
                left: -4px;
            }
     
            .toparrow1,.toparrow2{
                border-top:10px transparent dashed;
                border-right: 10px transparent dashed;
                border-bottom: 10px solid blue;
                border-left: 10px transparent dashed;
                position: absolute;
                top: 0;
                left: 0;
            }
            .toparrow1{
                top: -2px;
                border-bottom: 10px solid blue;
            }
            .toparrow2{
                border-bottom:10px solid #ddd; 
            }
            .top{
                left:2px;
            }
     
            .bottomarrow1,.bottomarrow2{
                border-top:10px solid blue;
                border-right: 10px transparent dashed;
                border-bottom: 10px transparent dashed;
                border-left: 10px transparent dashed;
                position: absolute;
                top: 0;
                left: 0;
            }
            .bottomarrow1{
                top: 2px;
                border-top: 10px solid blue;
            }
            .bottomarrow2{
                border-top:10px solid #ddd; 
            }
            .bottom{
                left:2px;
            }
        </style>

還有一個我更喜歡，代碼更簡潔的，我的感受更加漂亮的，用兩個旋轉45°的正方形重疊的，
如圖：

HTML：

<body>
    <div class="arrowbox">
        <span class="arrow right">
            <span class="rightarrow1"></span><span class="rightarrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow left">
            <span class="leftarrow1"></span><span class="leftarrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow top">
            <span class="toparrow1"></span><span class="toparrow2"></span>
        </span>
    </div>
    <div class="arrowbox">
        <span class="arrow bottom">
            <span class="bottomarrow1"></span><span class="bottomarrow2"></span>
        </span>
    </div>
</body>

CSS：

*{
            margin:0;
            padding: 0;
        }
 
        .arrowbox{
            width: 30px;
            height: 100px;
            background-color: #ddd;
            position: relative;
            margin-top: 10px;
        }
 
        .arrow{
            display: block;
            width: 10px;
            height: 10px;
        }
        .right,.left,.top,.bottom{
            position: absolute;
            top:45px;
            left: 0;
        }
        
        .rightarrow1,.rightarrow2{
            border-top:10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px solid blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .rightarrow1{
            left: 2px;
            border-left:10px solid blue;
        }
 
        .rightarrow2{
            border-left: 10px solid    #ddd;
        }
 
        .right{
            left: 6px;
        }
 
        .leftarrow1,.leftarrow2{
            border-top:10px transparent dashed;
            border-right: 10px solid blue;
            border-bottom: 10px transparent dashed;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .leftarrow1{
            left: -2px;
            border-right: 10px solid blue;
        }
        .leftarrow2{
            border-right:10px solid #ddd; 
        }
        .left{
            left: -4px;
        }
 
        .toparrow1,.toparrow2{
            border-top:10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px solid blue;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .toparrow1{
            top: -2px;
            border-bottom: 10px solid blue;
        }
        .toparrow2{
            border-bottom:10px solid #ddd; 
        }
        .top{
            left:2px;
        }
 
        .bottomarrow1,.bottomarrow2{
            border-top:10px solid blue;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .bottomarrow1{
            top: 2px;
            border-top: 10px solid blue;
        }
        .bottomarrow2{
            border-top:10px solid #ddd; 
        }
        .bottom{
            left:2px;
        }

參考文檔：

1. 純css實現箭頭,上下左右的箭頭
2. CSS3 Transform
3. CSS無敵：製做上下左右箭頭