鉛筆っぽいデザイン

別のサイト用に作っていた分です。
アイコンはMaterial Icons表示しています。
そのため、必要なければ、.arrow a::afterのあたりは不要になるかと思います。

• menu1
• menu2
• menu3

<ul class="arrow">
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
</ul>

ul.arrow,li{list-style-type : none;}
.arrow li{display:inline;}
.arrow a{margin-left:1.4rem;
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    padding-left:20px;
    background-color: #3BAF75;
    border-radius: 0 3px 3px 0;
    color: #fff;
    font-size: 0.8rem;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
    margin-bottom:0.5rem;
}
.arrow a::before {
    position: absolute;
    top: 0;    left: -12px;
    content: "";
    width: 0;    height: 0;
    border-color: transparent #3BAF75 transparent transparent;
    border-style: solid;
    border-width: 11px 12px 13px 0;
    -webkit-transition: .2s;
    transition: .2s;
}
.arrow a::after {
    position: absolute;
    top: 0;    left: 0;
    z-index: 2;
    font-family: 'Material Icons';
    content: '\e2e6';
    border-radius: 100%;
}
.arrow a:visited{color: #fff;}
.arrow a:hover  {background-color: #C0C0C0;  color: #fff;}
.arrow a:hover::before {  border-right-color: #C0C0C0;}

関連記事