在图像上使用文本塑造形状

所以我想使用 CSS 在图像上放置一个三角形，确切地说是一个包含一些文本的三角形。像这样的事情：

https://sketch.io/render/sk-11fa7e2aeba09cb08372f831f84d9af2.jpeg https://sketch.io/render/sk-11fa7e2aeba09cb08372f831f84d9af2.jpeg

我有点卡住了，所以这就是我现在得到的：

.image {
    background: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;

    & .text {
        position: absolute;
        background-color: #FFF;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
    }
}

<div class="image">
    <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>

如何旋转/倾斜/缩小盒子的左侧..？

非常感谢您的帮助！

您可以使用父元素的伪元素，rotate()它，和translateY()它在底角。

body {
  max-width: 320px;
}

.image {
  background: url("https://lh3.googleusercontent.com/-QPadFFLbBGA/AAAAAAAAAAI/AAAAAAAADB8/FkNCMP_vkAc/photo.jpg?sz=328");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}
.image .text {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 20px;
}
.image::before {
  content: '';
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-45deg) translateY(75%);
}

<div class="image">
  <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>