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

Question

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

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

坚实的形状我明白怎么做,它是透明的背景实现边界,我无法弄清楚.

Answer 1

Codepen演示

一个基本元素和伪元素

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