Flèche encadrée avec css3

Question

J'essaye de créer une flèche à gauche où la bordure devrait être 1 pixel noir et contenu blanc. Si j'ai bien compris, je dois utiliser 2 formes dans ce cas qui reposent l'une sur l'autre.

J'essaie les éléments suivants, mais ne peut le faire fonctionner

#list{ 
 

 
    margin:0; 
 
    padding:0; 
 

 
} 
 

 
li:before { 
 
    content:''; 
 
    height:0px; 
 
    width:0px; 
 
    border-left: 100px solid #000; 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    position:relative; 
 
    top:45px; 
 
} 
 

 
li:after { 
 
    content:''; 
 
    height:0px; 
 
    width:0px; 
 
    border-left: 100px solid #fff; 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    position:absolute; 
 
    left:15px; 
 
    top:12px; 
 

 
}

<ul id="list"> 
 
    
 
    <li></li> 
 

 
    
 
</ul>

Answer 1

Je suis l'image ci-dessus avec le code suivant

#arrow { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-left: 92px solid black; 
 
    border-bottom: 50px solid transparent; 
 
    } 
 
    #arrow:before { 
 
    content: ''; 
 
    position: relative; 
 
    width: 0; 
 
    right: 98px; 
 
    bottom: 10px; 
 
    height: 0; 
 
    border-top: 48px solid transparent; 
 
    border-left: 90px solid white; 
 
    border-bottom: 48px solid transparent; 
 
    } 
 
    #box { 
 
    border: solid #000 2px; 
 
    border-right: none; 
 
    padding: 6px; 
 
    width: 100px; 
 
    margin: 20px; 
 
    }

<div id="box"> 
 
    <div id="arrow"></div> 
 
</div>