如何在不影响响应设备的情况下在 div 的底部倾斜

Question

如何在不影响高度和宽度变化时响应的情况下使 div 的底部倾斜。请看图片。我尝试过无法解决此问题的 CSS 转换属性。我想为其应用背景重复图案和框阴影。

.mydiv
{
    height:400px;
    /*width:100%;*/
    width:350px;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    -webkit-transform: rotate(-3.8deg);
    background:url(http://www.emoticonswallpapers.com/background/thumb/nice/nice-background-pattern-184.gif);
}

http://jsfiddle.net/harikriz92/266f31o8

Answer 1

为了得到这个结果，我需要在 DOM 中添加一些元素。

基本上，一个三角形 div 将由一个基础组成，以便在左侧隐藏溢出，并使用填充 trcik 获得固定比例。

接下来，需要一个三角形内部来获得旋转，并溢出以沿对角线切割。

而且，在这个里面，一个伪设置背景图案

阴影可以直接在基础元素的伪元素上实现

.test {
    width: 60%;
    position: relative;
    background-position: bottom left;
    background-image: url("http://emoticonswallpapers.com/background/animals/animal-backgound-pattern-015.gif");
}

.test:after {
    content: "";
    position: absolute;
    width: 103%;
    height: 2px;
    top: 100%;
    right: 0px;
    transform: rotate(-14deg);
    transform-origin: top right;
    box-shadow: 0px 4px 6px 0px black;
}

.trianglebase {
    width: 100%;
    padding-top: 25%;
    position: absolute;
    top: 100%;
    left: 0px;
    overflow: hidden;
    z-index: -1;
}

.triangleinner {
    width: 104%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(-14deg);
    transform-origin: bottom left;
    overflow: hidden;
}

.triangleinner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image: url("http://emoticonswallpapers.com/background/animals/animal-backgound-pattern-015.gif");
    transform: rotate(14deg);
    transform-origin: bottom left;
}

<div class="test">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<div class="trianglebase">
<div class="triangleinner">
</div>
</div>
</div>

注意：使用剪辑路径可以更轻松地实现这一点。但由于 IE 仍然缺少这种能力，我宁愿走很长一段路，并获得完整的现代浏览器支持

Answer 2

这里有两种可能的解决方案：

使用背景尺寸

一个简单的选择是使用您想要的形状的背景图像，该图像适合div 的整个大小并适应其大小变化。像这样的：

.mydiv {
  width:100%;
  background:url(http://i.stack.imgur.com/Kbmfx.png);
  background-size:100% 100%;
  padding-bottom:30px;
}

<div class="mydiv">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>

如果您不使用位图/光栅图像（例如 PNG/JPEG），而是使用矢量图像（例如 SVG），那么您可以避免缩放时出现的失真/模糊/像素化。还有SVG is supported by all major browsers（包括IE9+，但不包括旧版本的IE）......但无论如何，这个解决方案使用background-size，直到IE9+才被支持。因此，如果此解决方案有效，SVG 应该可以使用它。

---

使用绝对定位图像

如果你还想支持IE8及以下，这里还有一个可能的解决方案：在.mydiv上加一个position:relative，然后在后面放置一个position:absolute占据.mydiv整个宽度/高度的图片其中（使用负 z-index）。

效果类似于将该图像作为背景，大小为“100% 100%”，并且它是 CSS2，因此受旧版本的 IE 支持。同样，使用 SVG 将避免边缘模糊（但不适用于 IE

这是一个演示：

.mydiv {
  position:relative;
  width:100%;
  padding-bottom:30px;
}

.mydiv .bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

<div class="mydiv">
  <img src="http://i.stack.imgur.com/Kbmfx.png" alt="" class="bg" />
  <p>Line 0</p>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>

这些解决方案的一个好处是它们实现起来非常简单......但不好的一面是，阴影可能看起来仍然有点时髦，如果您使用 SVG（我会）它在旧版本中不受支持IE 版本（尽管您可以为那些使用 PNG 的浏览器提供备用解决方案）。

---

最后，这是一个使用 SVG 内联的演示解决方案，否则阴影效果（我从 Erik Dahlström's answer 获得）将被剪掉。

.mydiv {
  position:relative;
  width:100%;
  padding-bottom:30px;
}

.mydiv svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:-1;
}

<div class="mydiv">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none"  viewBox="0 0 1000 1000" width="100%" height="100%">
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
      <feOffset dx="0" dy="0" result="offsetblur"/>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter> 
    <path d="M0,0 1000,0 1000,900 0,1000Z" fill="red" style="filter:url(#dropshadow)" />
  </svg>
  <p>Line 0</p>
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
</div>