WTS - Callout bubble

by Joe Robertson

HTML

<link rel="stylesheet" href="http://static.waytostay.us/assets/css/webfonts/web-fonts.css">
<span class="callout-solid">
    <a href="">
        <div class="bubble">    
            Callout <span class="orange-text">solid</span>...
        </div>
    </a>
    <div class="callout-triangle">
        <div class="triangle-fill"></div>
    </div>
</span>


<span class="callout-outline">
    <a href="">
        <div class="bubble">    
            Callout with <span class="orange-text">outline</span>
        </div>
    </a>
    <div class="callout-triangle">
        <div class="triangle-fill"></div>
        <div class="triangle-border"></div>
    </div>
</span>


<span class="callout-solid-2">
    <a href="">
        <div class="bubble">    
            Callout solid (<span class="orange-text">simple</span> variation)
        </div>
    </a>
    <div class="callout-triangle"></div>
</span>


<span class="callout-solid-2 orange">
    <a href="">
        <div class="bubble orange">    
            <span class="white-text">Simple</span> callout solid (orange)
        </div>
    </a>
    <div class="callout-triangle"></div>
</span>

CSS

body { background-color: rgb(250,250,250) }
a { color: black; text-decoration: none; }
.orange-text { color: #e75113; }
.white-text { color: white; }

.callout-solid,
.callout-outline,
.callout-solid-2 {
    display: inline-block;
    position: relative;
}

.callout-solid .bubble,
.callout-outline .bubble,
.callout-solid-2 .bubble {
    padding: 10px 20px 10px 13px;
    font-family: EksjaBold;
    background-color: white;
    border-bottom-right-radius: 30px;
}

.callout-solid-2.orange .bubble,
.callout-solid-2.orange .callout-triangle { background-color: #e75113; }

.callout-outline .bubble { border: 1px solid #efe9e4; }

.callout-triangle {
    position: relative;
    left: 20%;
}
.triangle-fill {
    z-index: 1;
    position: absolute;
    width: 0; 
	height: 0;
    border: 11px solid transparent; /* leaves an ugly color on the edges where border meets in FireFox */

    margin-top: -1px;
	border-top-color: white;
    border-bottom: none;
}
.triangle-border {
    z-index: -1;
    position: absolute;
    width: 19px; 
	height: 17px;
    border: 1px solid #efe9e4;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
        
   margin-top: -12px;
}


.callout-solid-2 .callout-triangle {
    z-index: -1;
    position: relative;
    left: 20%;
    margin-top: -8px;
    width: 16px; 
	height: 16px;
    background-color: white;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}