右角css中的三角形叠加

Question

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

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

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

这是我的代码：

def wait_for_coro(coro, loop):
    # submit coroutine to the event loop in the other thread
    # and wait for it to complete
    future = asyncio.run_coroutine_threadsafe(coro, loop)
    return future.wait()

wait_for_coro(channel_layer.group_send(group_name, ...), channel_loop)

谢谢你的答案：）

Answer 1

Google  是你的朋友！ ：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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