回退按钮 - CSS绘制箭头

当然网上能够找到不少代码，各有方法，我自己也尝试了一下，记录于此。
先上效果图：

效果图.PNG

我的想法是一个背景内置一个箭头组成这个按钮，而按钮我用两部分组成：三角形及长方形，所以HTML部分如下。

<div>
  <div class="arrow-box">
      <div class="arrow"></div><div class="stick"></div>
  </div>
  <h3 class="header">Articles from @ feihuang></h3>
</div>

接下来给样式。

• 背景部分简单

.arrow-box{
    width: 40px; /*背景作为容器设置为方形*/
    height: 40px;
    position: relative; /*为箭头在容器中定位提供条件*/
    border-radius: 50%; /*将正方形变为圆形*/
    background: #6262bd; /*紫色背景*/
}

既然是回退，这个按钮就需要可以被点击，我们可以加一个超链接，功能上可以用到一点点js，那么代码就成为

<div>
    <a href="#" onclick="javascript:history.back(-1);">
        <div class="arrow-box nav-left ml-20 mr-10">
              <div class="arrow"></div><div class="stick"></div>
        </div>
    </a>
    <h3 class="header">Articles from @ feihuang></h3>
</div>

这样，一个紫色圆形按钮就出现了。
接下来需要设置箭头样式

• 三角部分，我保留当前div的上边框及右边框设置为白色，并将此div旋转-135度，形成向右的箭头。

.arrow{
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(-135deg);
    margin: auto;
    position: absolute; /*用于定位*/
    top: 0; /*箭头上下都为0，可以将箭头垂直居中于容器*/
    left: 12px; /*箭头定位于背景偏左的地方*/
    bottom: 0; 
}

• 矩形部分，我给第二个div填充白色背景并定位于背景中间。

.stick{
    width: 14px;
    background-color: #fff;
    height: 2px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这样箭头就绘制出来了，最后再调整下

.nav-left {
    float: left;
}
.ml-20{
    margin-left: 20px
}
.mr-10{
    margin-right: 10px;
}
.header{
    color: black;
    font-size: 2em;
}