形状与图像上的文本

Question

所以我想使用CSS在图像上放置一个三角形,恰好是一个包含一些文本的三角形.像这样的东西:

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>

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

非常感谢您的帮助!

Answer 1

您可以使用父元素、rotate()it 和translateY()位于底角的 it 的伪元素。

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>