html - 如何使用 CSS 制作大于 90 度的对称向下指向 Angular ？

Question

我已经尝试使用各种倾斜迭代来使用纯 CSS 获得像这样的 Angular 轮廓:

它似乎永远不会正确。我可以轻松地通过旋转和边框制作 90 度 Angular ，但我无法获得大于 90 度的 Angular 。我实际上用得更少，但这更像是一个 css 问题。

Solid shapes 我明白怎么做，它实现了我无法弄清楚的具有透明背景的边框。

Answer 1

以及伪元素:http://codepen.io/gc-nomade/pen/LGtap/

来自 <div>Envellope</div> :

div {
  width:500px;
  height:194px;
  background:#2F374B;
  position:relative;/* to master pseudo position */
  text-align:center;
}
div:before,
div:after {
  content:'';
  position:absolute;
  width:57%;/* update this to match with rotation degrees */

  box-shadow:0 0 3px 2px #363E55;
  top:2px; /* size of shadow */
  left:2px;/* size of shadow */
 transform:rotate(30deg);
   transform-origin:top left;
}
div:after {
  transform:rotate(-30deg);
     transform-origin:top right;
  left:auto;
  right:2px;/* size of shadow */
}

玩多个box-shadow，你可以增加字母的外观

div:before,
div:after {
  content:'';
  position:absolute;
  width:57.5%;
  height:1px;
  background:#456;
  box-shadow:0 0 3px 2px #363E55,
    340px -82px  4px 1px  #363E55,
    0 3px  5px black;
  ;

  top:2px;
  left:2px;
  transform:rotate(30deg);
  transform-origin:top left;
}
div:after {
  transform:rotate(-30deg);
  transform-origin:top right;
  left:auto;
  right:2px;
  background:#456;
  box-shadow:0 0 3px 2px #363E55,
    -340px -82px  4px 1px  #363E55,
    0 3px  5px black;
}