Reputation: 114
I want to create an overlay with css over one image like this:
but I only do a square overlay like this:
how I can make the first shape with css ??
here is my code:
.card-img-overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 150px;
padding: 1.25rem;
}
thank you for your answers :)
Upvotes: 2
Views: 8165
Reputation: 302
#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>
Upvotes: 5
Reputation: 272723
I will go with a simple gradient and no need for any extra markup or the use of pseudo element:
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>
Upvotes: 1