Making a css speech bubble without pseudo elements

[lultrekker]

I have the following CSS which applies to a P tag for a nice neat speech bubble.
I need to create the same effect without using BEFORE or AFTER pseudo elements.
This is because they are not supported by mPDF.

Is anyone able to figure out a way of achieving this?
Thanks,

<style>
.triangle-border1 {
  position:relative;
  padding:15px;
  margin:1em 0 1em;
  border:5px solid #F7827B;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}


.triangle-border1:before {
  content:'';
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#F7827B transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}


.triangle-border1:after {
  content:'';
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

</style>


<p class='triangle-border1'>CONTENT</p>

[PaulOB]

@lultrekker

Is anyone able to figure out a way of achieving this?

Assuming you have access to the html you can just add a couple of extra elements to the p tag?

e.g.

<style>
.triangle-border1 {
  position:relative;
  padding:15px;
  margin:1em 0 1em;
  border:5px solid #F7827B;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}


.triangle-border1 b{
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#F7827B transparent;
  display:block;
  width:0;
}
.triangle-border1 b b {
  bottom:7px; /* value = - border-top-width - border-bottom-width */
  left:-13px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-color:#fff transparent;
}

</style>


<p class='triangle-border1'><b><b></b></b>CONTENT</p>

[dresden_phoenix]

It’s odd that mPDF would not support pseudo tags.

anyway, it looks like it does support CSS transforms. so you could do this as well.

<style>
.bubbled {
  position:relative;
  padding:15px;
  margin:1em 0 1em;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
 

.bubbled, .aft{
 	border:5px solid #F7827B;

}

.bubbled .aft{
   position:absolute;
   bottom:-16px; /* value = - border-top-width - border-bottom-width */
   border-top:none;
   border-left:none;
  left:40px; /* controls horizontal position */
  width:20px;
  height: 20px;
  background:#fff;
  -webkit-transform: rotate(45deg)
 }
 
</style>


<p class='bubbled'>CONTENT. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<b class="aft"></b></p>

I gave a class to the B tag, because I know some people do use it to bold text ( although that should only be done in rare occasions)