html - 带阴影的 CSS 三 Angular 形

Question

我使用 CSS 使用概述的代码制作了一个“三 Angular 形”HERE

(jsFiddle example)

效果很好，但我想像这样在三 Angular 形和条形上插入阴影:

如何？

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>