How do I do this effect as in this image in css?
I made an example using the pseudo class ::after
, so you have no problem when you make the effect on the element where your content is inside. To create this slope I used transform:skew
and I used flexbox to make everything aligned.
See the result in the example below:
.container {
display: flex;
position: relative;
width: 500px;
height: 300px;
background-image: url(http://unsplash.it/500/300);
background-size: cover;
overflow: hidden;
flex-direction: row-reverse;
align-items: center;
box-sizing: border-box;
padding-right: 3rem;
}
.container::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
transform: skew(-30deg) translateX(calc(50% + 3rem));
}
.cont {
font-family: sans-serif;
color: #fff;
z-index: 99;
}
<div class="container">
<div class="cont">
<h1>Meu texto</h1>
<p>texto texto</p>
<button>BTN</button>
</div>
</div>
To create this effect, simply use transform: skewX(-18deg);
in the element you want to create the tilt effect.
Example:
* { padding: 0; margin: 0 }
.container {
background:blue;
background-size: cover;
height: 149.8px;
overflow:hidden;
width: 314px;
}
/* Elemento inclinado */
.overlay {
background: #00000050;
height: 100%;
width: 65%;
margin-left: 46%;
transform: skewX(-18deg);
overflow:hidden;
}
h1, span {
color:#FFF;
display:block;
margin: 30px;
transform: skewX(18deg);
}
span {
margin-top: -20px;
}
<div class="container">
<div class="overlay">
<h1>Title</h1>
<span>Description</span>
</div>
</div>
Reference: link
You can also use a background gradient to do this. Just add background: linear-gradient(107deg, transparent 20%, green 20%);
to the element you want, for example:
* { padding: 0; margin: 0 }
.container {
background:blue;
background-size: cover;
height: 149.8px;
overflow:hidden;
width: 314px;
}
/* Elemento inclinado */
.overlay {
background: linear-gradient(107deg, transparent 20%, green 20%);
float:right;
height: 100%;
padding-left: 20px;
width: 60%;
overflow:hidden;
}
h1, span {
color:#FFF;
display:block;
margin: 30px;
}
span {
margin-top: -20px;
}
<div class="container">
<div class="overlay">
<h1>Title</h1>
<span>Description</span>
</div>
</div>