如何创建带有灰色边框的白色箭头？

Question

他

我想创建一个箭头指向左边，但有一个灰色边框。

到目前为止，我只是一个灰色的箭头。

有没有人有关于我如何做到这一点的想法？

我附上了我的意思。

预先感谢您！

.tri { 

    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 20px; 

} 

.tri{ 
    border-color: transparent #ccc transparent transparent; 

} 


<div class="tri"></div> 

Answer 1

尝试类似下面：

.box { 
 
    width: 50px; 
 
    height: 150px; 
 
    border: solid 1px gray; 
 
    border-radius: 5px; 
 
    margin: 20px 0 0 100px; 
 
    position: realtive; 
 
    
 
    } 
 

 
.box:after, .box:before { 
 
    content: "\f0d9"; 
 
    font-family: fontAwesome;; 
 
    top: 40%; 
 
    left: -12px; 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size: 36px; 
 
    color: gray; 
 
    position: relative; 
 
    
 
    
 
    } 
 

 
.box:after { 
 
    left: -23px; 
 
    color: white; 
 
    
 
    }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 

 
<div class="box"></div>

这