Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Posted by Alexandra Cianciara
Alexandra Cianciara
2,465 Points

How to create bubble shapes in HTML email- urgent

Hello,

Please could someone please help me asap, I need to do it for tomorrow at work.

How to create bubble shapes in HTML email?

This is what I have but I have no idea where to add the absolute styling and how to create the triangle shape. I have this for now:

<tr>

        <td position="relative" width="400" valign="top" align="left">
         <table class="container600" style="border-collapse:separate;border-spacing:0; empty-cells:show; mso-table-lspace:0pt; mso-table-rspace:0pt; border-radius:40px; border:10px solid #5A328A; border-style:solid" width=350px height=150px  cellspacing="0" cellpadding="0" border="0" align="center">

           <td style="font-family:Isidora, Franklin Gothic, Gill Sans, Roboto; Font-size:14px; line-height:18px; font-weight:normal; font-style:normal; color:#423F3D; padding:30px 30px 20px 30px "align="left">

Dialling in from abroad? </td>

         </table>

       </tr>

      </table>
     </td>
          </tr>
Nerissa Taylor
Nerissa Taylor
2,749 Points

try this site: https://css-tricks.com/the-shapes-of-css/

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I'm confused by the combination of the words "bubble" and "triangle". Did you perhaps mean bullet shapes?

Assuming so, one way to make a few common shapes is with CSS borders:

<span style="display: inline-block; border:10px solid #5A328A;border-radius:50%"></span> Round<br>
<span style="display: inline-block;border:10px solid #5A328A"></span> Square<br>
<span style="display: inline-block;border:0 solid transparent;
  border-top:0; border-bottom-color:#5A328A;border-width:20px 12px"></span> Triangle

Update: It sounds like you might want the entire table to look like a speech bubble. So perhaps adding a triangle to one edge:

<table class="container600" style="border-collapse:separate;border-spacing:0;
    empty-cells:show; mso-table-lspace:0pt; mso-table-rspace:0pt; border-radius:40px;
    border:10px solid #5A328A; border-style:solid" width=350px height=150px
       cellspacing="0" align="center">
  <tr>
    <td style="font-family:Isidora, Franklin Gothic, Gill Sans, Roboto; font-size:14px;
        line-height:18px; color:#423F3D; padding:30px 30px 20px;position:relative" align="left">
      <span style="display: inline-block;border:30px solid transparent;
           border-right-color:#5A328A;position:absolute;top:35px;left:-69px"></span>
      Dialing in from abroad?
    </td>
  </tr>
</table>
Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Thank you Nerissa, the issue is I’m not sure where in my html I need to add the styling. It’s in the email table and using inline CSS

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Thank you Steven, it’s for the bubble speech shape. More of a rectangular with rounded edges and with arrows, most likely on the left or right. More like a chat shape. I’m not sure what css styling to use and not sure where to add it in my html in the email table. Thank you

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I updated my answer .. is that what you were after?