CSS Dreieck mit eingelassenem Schatten

Question

ich ein „Dreieck“ gemacht haben, mit Hilfe von CSS mit dem Code skizzierte HERE

(jsFiddle example)

Es funktioniert großartig, aber ich möchte einen Einsatz Schatten auf das Dreieck und die Bar haben wie folgt aus:

Wie?

HTML:

<div id="wrapper"> 
    <div class="triLeft"></div> 
    <div class="triAngle"></div> 
</div> 

CSS:

.triLeft{ 
    width:40px; 
    background:#fff; 
    margin:0; 
    float:left; 
    height:200px; 
} 

.triAngle{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 45px 0 45px 40px; 
    border-color: transparent transparent transparent #ffffff;     
    float:left; 
    margin-top:20px; 
}    

#wrapper{ 
    height:200px; 
    background:brown; 
} 

Answer 1

man könnte es eine andere Art und Weise versuchen, ohne Grenzen, sondern transform:rotate();

http://codepen.io/anon/pen/MymQMK

div.trgl { 
 
    position:relative; 
 
    margin:2em; 
 
    overflow:hidden; 
 
} 
 
div.trgl:after { 
 
    content:''; 
 
    position:absolute; 
 
    height:40px; 
 
    width:40px; 
 
    top:2em; 
 
    left:-20px; 
 
    background:white; 
 
    box-shadow: inset 0 0 5px black ; 
 
    transform:rotate(45deg); 
 
} 
 
div.trgl div{ 
 
    position:relative; 
 
    min-height:200px; 
 
    padding:1em; 
 
    box-shadow: 0 0 5px black; 
 
    margin:3px; 
 
    background:lightgray; 
 
}

<div class="trgl"> 
 
    <div> 
 
    </div> 
 
</div>