如何使用HTML，CSS使背景div内部弯曲？

Question

我希望我的部分背景看起来像最后的图像中所示，我怎么能用css做到这一点？

＆＃13;

＆＃13;

.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

＆＃13;

<div class="bg">
  <p>Section Content</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

像这样使用线性渐变而不需要额外的元素或伪元素：

.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  background:
  linear-gradient(to bottom left, red 50%,#fff 51%) 0 100%/50% 50px no-repeat,
  linear-gradient(to bottom right, red 50%,#fff 51%) 100% 100%/50% 50px no-repeat,
  linear-gradient(to bottom right, #fff 49%,red 50%) 100% 0/50% 50px no-repeat,
  linear-gradient(to bottom left, #fff 49%,red 50%) 0 0/50% 50px no-repeat,
  red;
  color: #fff;
  display: flex;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

但是如果你需要边框我会考虑像这样的伪元素：

.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  position:relative;
  color: #fff;
  display: flex;
  z-index:0;
}
.bg:before,
.bg:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  background:red;
  border:2px solid #000;
  z-index:-1;
}
.bg:before {
  right:50%;
  left:0;
  transform:skewY(15deg);
  transform-origin:top left;
  border-right:none;
}
.bg:after {
  left:50%;
  right:0;
  transform:skewY(-15deg);
  transform-origin:top right;
  border-left:none;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

Answer 2

您可以使用clip-path执行此类操作，并使用this tool创建它们。

.bg {
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
}

.bg p {
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

Answer 3

您可以按照以下步骤获得所需的形状。

＆＃13;

＆＃13;

.left {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 200px;
  border: none;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-transform:    skewY(15deg);
  transform:    skewY(15deg);
  float: left;
  margin-top: 20px;
}

.right {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 200px;
  border: none;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-transform:    skewY(-15deg);
  transform:    skewY(-15deg);
  float: left;
  margin-top: 20px;
}

＆＃13;

<div class="left">Hello</div>	
<div class="right">World</div>

＆＃13;

＆＃13;

＆＃13;