html - 带有背景图像和圆 Angular 的底部斜线

Question

是否可以使用带有倾斜底部和圆 Angular 的背景图像的 div？

Most examples仅使用不具有背景图像所具有的重复图像问题的背景颜色。

CSS 剪切路径

但剪切路径选项有效，它有 no support on IE 11 .

目前最接近的解决方案

HTML:

<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

CSS:

.container {
  overflow: hidden;
  padding-bottom: 40px;
}

#parallelogram {
  width: 300px;
  height: 150px;
  margin: -41px 0 0 0;
  -webkit-transform: skewY(-11deg);
  -moz-transform: skewY(-11deg);
  -o-transform: skewY(-11deg);
  background: red;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}

.image {
  background: url(http://baconmockup.com/340/500);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skewY(11deg);
  -moz-transform: skewY(11deg);
  -o-transform: skewY(11deg);
}

https://jsfiddle.net/Spindle/81e30bmx/

但这样做的问题是圆 Angular 也不再可见......

Answer 1

将 border-radius 添加到 parent div 可以工作，因为它将作为 border-radius for four > Angular ，然后 单独 使用 border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius 您可以如下所示相应地更改和对齐，因此它在左下角以及 4 边的边界半径处倾斜，

.container {
  overflow: hidden;
  padding-bottom: 40px;
  border-top-right-radius:16px;
  border-bottom-right-radius:14px;
  border-top-left-radius:40px;
  margin-top:40px;
  display:inline-block;
  }

#parallelogram {
  width: 300px;
  height: 150px;
  margin: -41px 0 0 0;
  -webkit-transform: skewY(-11deg);
  -moz-transform: skewY(-11deg);
  -o-transform: skewY(-11deg);
  background: red;
  overflow: hidden;
  position: relative;
  border-radius: 40px;  
}

.image {
  background: url(http://baconmockup.com/340/500);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skewY(11deg);
  -moz-transform: skewY(11deg);
  -o-transform: skewY(11deg);
  
}

<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>