Question

是否可能有一个背景图像的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/

但问题是圆角不再可见了......

Answer 1

将border-radius添加到parent div可能会有效，因为border-radius角可以four，individually使用border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius可以使用.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); }相应地改变和对齐如下，因此它在左下方与4边的边界半径倾斜，

＆＃13;

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

＆＃13;

Bitmap r = (Bitmap) MyProject.Properties.Resources.ResourceManager.GetObject("Mybmp");

＆＃13;

Answer 2

这可能并且确实可以用于您的示例。

如果你在谈论左上角和右上角被切断，那么你需要做的是在顶部添加一个边距，以便：

#parallelogram { margin: -41px 0 0 0; }

会变成：

 #parallelogram { margin: 23px 0 0 0; }

这会在中添加孔形状。

底部倾斜的线与背景图像和圆角

2 个答案: