嵌入阴影的CSS三角形

Question

我使用CSS使用代码HERE

创建了一个“三角形”

(jsFiddle example)

效果很好，但我希望三角形和条形上有一个插入阴影：

如何？

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

你可以用另一种方式尝试，但没有边框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>