右上角css中的三角形叠加答案

【问题标题】：Triangle overlay in right corner css右上角css中的三角形叠加
【发布时间】：2020-07-16 05:05:37
【问题描述】：

我想用 css 在一个图像上创建一个叠加层，如下所示：

但我只做这样的方形叠加：

如何使用 css 制作第一个形状？？

这是我的代码：

.card-img-overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 150px;
padding: 1.25rem;
}

谢谢你的回答:)

【问题讨论】：

使用 [这里] (stackoverflow.com/questions/14233341/…) 解释的旋转方法
你可以使用很多东西：从 CSS linear-gradient 背景，CSS :before 带边框，CSS transform 和 rotate，CSS3 -clip-path 和 polygon，绘制@ 987654333@ shape, SVG... 这么多选择 - 但你一个都没试过？还是你？你的谷歌研究是什么，你尝试了哪一个？

标签： html css css-shapes

【解决方案1】：

Check this out

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid #9020d1bb;
  border-left: 100px solid transparent;
  position: absolute;
}

#container {
  position: relative;
}

#container #triangle-topleft,
#overlay {
  position: absolute;
  color: white;
  right: 0;
}

<div id="container">
  <div id="triangle-topleft"></div>
  <div id="overlay">Microsoft</div>
</div>

【讨论】：

【解决方案2】：

我将使用简单的渐变，不需要任何额外的标记或使用伪元素：

body {
  height: 100vh;
  margin: 0;
  background: 
  linear-gradient(to top right, transparent 50%, rgba(255, 0, 0, 0.5) 51%) 0 0/100% 200px no-repeat, 
  url(https://lorempixel.com/1000/1000/) center/cover;
}
div {
 height:200px;
 text-align:right;
 color:#fff;
 padding:10px;
 font-size:25px;
}

<div>
  <p>Some content</p>
</div>

【讨论】：

我们如何在红色区域内放置一些文本，如果我添加更多控件，它看起来像形状正在破坏