Flip CSS bubble triangle position?

Question

Fiddle

HTML:

<blockquote class="rectangle-speech-border">
    <p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>

CSS:

.rectangle-speech-border {
  position:relative;
  padding:50px 15px;
  margin:1em 0 3em;
  border:10px solid #5a8f00;
  text-align:center;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  left:50px;
  width:50px;
  height:30px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#5a8f00;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:80px 50px;
  -moz-border-radius-bottomright:80px 50px;
  border-bottom-right-radius:80px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates smaller curve */
.rectangle-speech-border:after {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  left:50px;
  width:20px;
  height:30px;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:#5a8f00;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
  content:"";
  position:absolute;
  bottom:-40px;
  left:45px;
  width:10px;
  height:10px;
  background:#5a8f00;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:76px;
  width:24px;
  height:15px;
  background:#fff;
}

Example taken from: Nicolas Gallagher

Basically this text bubble is curving to the left and on the bottom-left. I'd like to duplicate it exactly except have it on bottom-right and curving to the right. Just flip it.

I've tried changing the rights into lefts but it's not happening. Can anyone tell me what needs to change to flip this bubble?

Answer 1

Do you mean this?

If you want to change geometry, you should to play with border-width and border-radius. Also I changed pseudo-class from :after to :before, and vice versa in elements and border-radius from right to left.

.rectangle-speech-border {
  position:relative;
  padding:50px 15px;
  margin:1em 0 3em;
  border:10px solid #5a8f00;
  text-align:center;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:after {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-40px;
  left:400px;
  width:20px;
  height:30px;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:#5a8f00;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-left-radius:40px 50px;
  -moz-border-bottom-left-radius:40px 50px;
  border-bottom-left-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates smaller curve */
.rectangle-speech-border:before {
  content:"";
  position:absolute;
  z-index:10;
  left:370px;
  width:50px;
  height:30px;
  bottom: -40px;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:#5a8f00;
  background:transparent;
  /* css3 */
  -webkit-border-bottom-left-radius:40px 50px;
  -moz-border-bottom-left-radius:40px 50px;
  border-bottom-left-radius:40px 50px;
  /* reduce the damage in FF3.0 */
  display:block;
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
  content:"";
  position:absolute;
  bottom:-40px;
  left:425px;
  width:10px;
  height:10px;
  background:#5a8f00;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:376px;
  width:24px;
  height:15px;
  background:#fff;
}

<blockquote class="rectangle-speech-border">
    <p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>