join 2 elements with opacity to look like one - HTML CSS CSS Property

HTML CSS examples for CSS Property:opacity

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. opacity

Description

join 2 elements with opacity to look like one

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum </title> 
  <style>
@charset "UTF-8";
body {<!--   ww w .  j  a  v  a2  s  . co  m-->
   padding-top:81px;
   background:Chartreuse;
}

*::after, *::before {
   line-height:19px;
}

.progress__control {
   color:yellow;
   position:relative;
}

.progress__control::before {
   content:'......... .....';
   position:absolute;
   left:51%;
   top:-27px;
   transform:translateX(-51%);
   padding:9px 13px;
   box-sizing:border-box;
   border-radius:3px;
   background-color:blue;
   opacity:0.9;
}

.progress__control::after {
   content:'';
   position:absolute;
   left:51%;
   top:9px;
   transform:translateX(-51%);
   box-sizing:border-box;
   width:0;
   height:0;
   border-left:7px solid pink;
   border-right:7px solid OrangeRed;
   border-top:7px solid grey;
   opacity:0.9;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="progress__control progress__control_to_next"> 
  </div>  
 </body>
</html>

Related Tutorials