Opacity in Pseudo-Element and Parent

Asked

Viewed 34 times

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>

html css

2 answers

4


If I understand your goal correctly, one of the ways is to use the triangles trick:

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: -40px;
  top: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid rgba(248, 149, 32, 0.8);
  border-bottom: 20px solid rgba(248, 149, 32, 0.8);
  border-left: 20px solid transparent;
}
<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.

0

You need to use the attribute border-radius in your CSS. See the reference in W3schools

To solve the opacity problem you adjust the color of the div until it is equal to another color without opacity. Or simply remove the opacity of the two and adjust the color in the attribute rgba(248, 149, 32, 1);

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;
  border-radius: 10px;
}

h4:before {
  content: "";
  position: absolute;
  left: -30px;
  height: 34px;
  width: 60px;
  background-color: rgba(248, 171, 79,1);
  bottom: -7px;
  transform: rotateZ(-45deg);
  border-radius: 12px;
}
<h4> Aqui vai uma frase </h4>

Note that to merge the two Divs I modified the position a few pixels.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.