两侧有斜边

Question

我试图制作一个宽度为100％的行，其中div的两边都有倾斜的边缘和图像。

Imgur

我在网上看到的所有内容都只涉及一方倾斜。

我尝试过伪元素/倾斜，但似乎无法让它们工作，同时将图像保留在页面的左侧和右侧。

任何帮助都将不胜感激。

Answer 1

.slanted_div {
  width: 300px;
  height: 100px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: #f2d600;
  text-align:center;
 color:#ffffff;
 font-size:20px;
 line-height:5.2;
 margin:0 auto;
}

span {
  transform: skew(20deg); 
  display: block;
}

<div class="slanted_div">
<span>Div with Text</span>
</div>

这与你正在寻找相同吗？

希望这有帮助。