形状与图像上的文本

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

使用linear gradient创建三角形，并使用填充top和left使三角形足够大以供文本使用。

＆＃13;

＆＃13;

.image {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/animals/);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.text {
  position: absolute;
  background: linear-gradient(to bottom right, transparent 50%, white 51%);
  bottom: 0;
  right: 0;
  padding: 60px 0 0 60px;
  text-align: right;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用父级的伪元素，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>

Answer 3

您可以使用.image的{​​{1}}和::before属性上的边框在右下角制作三角形。

＆＃13;

＆＃13;

::after

＆＃13;

.image {
    height:300px;
    width:300px;
    background-image: url('http://lorempixel.com/300/300/');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.image::before,
.image::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.image::before {
    border-width: 1.5em;
}

.image::after {
    border-width: 3.35em; /* makes triangle bigger */
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.text {
    position:absolute; 
    bottom:0; 
    right:0; 
    z-index:1;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

＆＃13;

＆＃13;

＆＃13;