Opacity in Pseudo-Element and Parent

Navigation
1

I want to make a div with the left corner tilted, but it is not working.

Is this the right way to do it?

In my case it even works because the div parent has overflow , so neither does the rest of :before appear below.

The problem with this is the opacity, it has the :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>
    
asked by anonymous 30.09.2015 / 21:33

2 answers

4

If I understand your goal well, one way is to use the trick of triangles : 

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>
    
30.09.2015 / 22:04
0

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

To solve the opacity problem, you adjust the color of the div until it is the same as another color without opacity. Or simply strip 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 do the merge of the two DIVs I modified the position some pixels.

    
30.09.2015 / 21:50
Button for cellular connection [closed] Hide pdf extension in URL