CodePen

HTML

            
              <!-- you figure out a better semantic for your bubble -->
<div style="left: 100px; top: 50px"><span>Bubble with opacity</span></div>

<div style="left: 185px; top: 85px"><span style="width:4em">Kittens are cool!</span></div>

<p>Notice the border does NOT have opacity. This is not a <code>opacity: something;</code> trick!</p>

<p>Alignment isn't perfect with the borders, I'm just showing that this is possible to do.</p>

<h4>Updates:</h4>
<ul>
  <li>Now supports Firefox, Chrome and IE10.</li>
  <li>Text is now selectable.</li>
</ul>
            
          
!

CSS

            
              body {
  background: url('http://placekitten.com/400/400/') no-repeat;
  padding-left: 400px;
}

div {
  background: rgba(255,255,255,.5);
  border-radius: 2em;
  display: inline-block;
  position: absolute;
  z-index: 0;
}

div:before {
  border: 1em solid rgba(0,0,0,0);
  border-bottom-width: 0;
  border-top-color: rgba(255,255,255,.5);
  content: '';
  left: 50%;
  margin-left: -1em;
  position: absolute;
  top: 100%;
}

div:after {
  border-bottom: .2em solid black;
  border-right: .2em solid black;
  content: '';
  height: 1.4em;
  margin-left: -.785em;
  margin-top: -.9em;
  left: 50%;
  padding-bottom: .2em;
  position: absolute;
  top: 100%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 1.4em;
}

span {
  border: .2em solid black;
  border-bottom-color: rgba(0,0,0,0);
  border-radius: inherit;
  display: block;
  padding: .6em 1em;
  position: relative;
  text-align: center;
  z-index: 1;
}

span:before {
  border-bottom: .2em solid black;
  border-left: .2em solid black;
  border-radius: inherit;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  content: '';
  height: 100%;
  left: -.2em;
  right: -webkit-calc(50% + 1em);
  right: calc(50% + 1em);
  position: absolute;
  top: 0;
  z-index: -1;
}

span:after {
  border-bottom: .2em solid black;
  border-right: .2em solid black;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  content: '';
  height: 100%;
  right: -.2em;
  left: -webkit-calc(50% + 1em);
  left: calc(50% + 1em);
  position: absolute;
  top: 0;
  z-index: -1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................