图像上带有文本的形状答案

【问题标题】：Shape with text over an image图像上带有文本的形状
【发布时间】：2017-07-25 02:13:27
【问题描述】：

所以我想使用 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>

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

非常感谢您的帮助！

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

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

.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;
}

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

【讨论】：

有趣的解决方案...谢谢！我注意到它看起来有点像素化（线条不是 100% 笔直和平滑） - 有没有你知道的解决方法？
解决方法是在色标之间留一个小间隙。

【解决方案3】：

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

.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;
}

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

【讨论】：