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

Question

我尝试使用各种迭代迭代来获得纯粹的CSS这样的角度轮廓：

它似乎永远不会出现。我可以轻松地与旋转和边界形成90度角，但是角度大于90度已经逃过了我。我实际上使用的更少，但这更像是一个css问题。

坚实的形状我知道怎么做，它是用透明的背景实现边界，我无法弄清楚。

Answer 1

Codepen Demo

一个基本元素和;伪元素

<强> CSS

.box {
  width:600px;
  height:200px;
  border:1px solid grey;
  margin:25px auto;
  position: relative;
}

.box:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border:300px solid transparent;
  border-width:150px 300px;
  border-top-color: lightgrey;
}

根据需要调整边框。

Answer 2

以及伪元素：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 */
}

使用多个框阴影，您可以增加字母

的外观

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;
}