1
I want to make a div
with the left corner tilted, but it’s not working.
This is the right way to do it ?
In my case it even works because the div
father has overflow
, then the rest of the :before
below.
The problem with that is opacity :before
behind visible, so to speak.
h4 {
font-size: 21px;
font-family: "Verdana";
color: #FFF;
background-color: rgba(248, 149, 32, 0.8);
padding: 5px 15px;
margin: auto;
text-align: center;
position: absolute;
top: 20px;
width: 80%;
right: 0;
line-height: 30px;
transition: all 0.4s ease;
transition-delay: 0.3s;
}
h4:before {
content: "";
position: absolute;
left: -41px;
height: 30px;
width: 60px;
background-color: rgba(248, 149, 32, 0.8);
bottom: -7px;
transform: rotateZ(-45deg);
}
<h4> Aqui vai uma frase </h4>
I used your way. Cool. I didn’t know it, actually I didn’t see a triangle in it. But reading the article in LINK I understood.
– Diego Souza