html - 右 Angular css中的三 Angular 形叠加

Question

我想用 css 在一张图片上创建一个叠加层，如下所示:

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

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

这是我的代码:

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

谢谢你的回答:)

Answer 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>