CSS：如何创建特殊形状

Question

我想创建一个如上所示的div 我试图达到这样的目标，但我不知道如何抬起边界底部。

#myForm {
  border-bottom: 100px solid green;
  border-right: 70px solid transparent;
  height: 0;
  width: 150px;
}

<div id="myForm"></div>

Answer 1

使用CSS ::before和::after伪元素：

html{
  background-color: #fff;
}

div{
  width: 300px;
  height: 100px;
  position: relative;
  background-color: red;
}

div::before, div::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

div::before{
  bottom: 0;
  border-width: 0 0 50px 300px;
  border-color: transparent transparent #fff transparent;
}

div::after{
  right: 0;
  border-width: 0 20px 100px 0;
  border-color: transparent #fff transparent transparent;
}

<div></div>

JSFiddle

Answer 2

您想要探索:before＆amp;等伪元素。 :after 下面的代码片段会让您了解从哪里开始，但您很可能需要根据您的具体情况进行调整。

＆＃13;

＆＃13;

#myForm {
  border-bottom: 100px solid green;
  border-right: 70px solid transparent;
  height: 0;
  width: 150px;
}
div#myForm:after {
  content: "";
  border-left: 222px solid green;
  border-bottom: 27px solid transparent;
  display: block;
  position: absolute;
  height: 0;
  bottom: -127px;
  z-index: 9999999;
  left: 0;
  right: 0;
  width: 100%;
}

＆＃13;

<div id="myForm"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用margin-bottom：-100px;例如并使用！如果需要，重要