如何仅使用 CSS

Question

我需要 "cut" 从图像的左下角到右中（三角形）的图像。

我尝试过使用带有 :after 和 :before 伪元素的边框进行类似的操作，但我不知道如何在我的特定情况下实现这一点。

Answer 1

使用纯色背景？

如果您使用纯色背景，您可以使用伪元素 'cover it up'

.wrap {
  position: relative;
  height: 300px;
  width: 300px;
}
.img {
  height: inherit;
  width: inherit;
  background: url(http://lorempixel.com/300/300);
  position: relative;
  overflow: hidden;
  z-index: -2;
}
.img:before {
  content: "";
  position: absolute;
  top: 100%;
  lefT: 0;
  height: 100%;
  width: 200%;
  transform: skewY(-22.5deg);
  transform-origin: top left;
  background: white;
}
.text {
  position: absolute;
  top: 80%;
  left: 20%;
  width: 60%;
  background: antiquewhite;
  display: inline-block;
  min-height: 50%;
}
.text:before {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
  transform: skewY(-22.5deg);
}

<div class="wrap">
  <div class="img"></div>
  <div class="text">
    Lorem whatever it is
  </div>
</div>

只需要新的浏览器？

为什么不尝试剪辑路径属性（但是支持有限）

div{
      height:300px;
      width:300px;
      background:url(http://lorempixel.com/300/300);
      position:relative;
      overflow:hidden;
      -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
    clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);

      }

/*for demo only*/
html, body{
  height:100%;
 background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}

<div></div>

需要透明背景和浏览器支持？

您可以通过倾斜容器元素和 'unskewing' 子 img 标签来逃脱 - 尽管我必须补充一点，我不能保证图像质量保持不变

.skewMe {
  position: relative;
  height: 300px;
  width: 300px;
  transform: skewY(-22.5deg);
  overflow: hidden;
}
.skewMe img {
  transform: skewY(22.5deg);
  transform-origin: top left;
  position: absolute;
  top: 0;
  lefT: 0;
  height: 100%;
  width: 100%;
}

<div class="skewMe">
  <img src="http://lorempixel.com/300/300" />
</div>

如何仅使用 CSS

How do this with only CSS

html

css

css-shapes

使用纯色背景？

只需要新的浏览器？

需要透明背景和浏览器支持？