apply 1px borders to CSS speech bubbles? - css

Question

How can we apply 1px borders to these speech bubbles?
This similar SO post did not work here, as we use a different approach to generate the speech bubbles
.chat-messages {
width: calc(100%);
padding-bottom: 5px;
background-color: #f3f3f4;
}
.sb-time {
font-size: 10pt;
font-weight: 400;
margin: 7px -5px 0px 10px;
float: right;
}
.sb {
font-size: 13pt;
font-weight: 500;
border-radius: 6px;
display: block;
padding: 10px 15px 5px 15px;
position: relative;
vertical-align: top;
clear: both;
}
.sb::before {
content: "\00a0";
display: block;
height: 15px;
position: absolute;
top: 10px;
-moz-transform: rotate(30deg) skew(-35deg);
-ms-transform: rotate(30deg) skew(-35deg);
-o-transform: rotate(30deg) skew(-35deg);
-webkit-transform: rotate(30deg) skew(-35deg);
transform: rotate(30deg) skew(-35deg);
width: 15px;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
background-color: #ffffff;
left: -8px;
}
.sb-1 {
background-color: #EEFFDD;
float: right;
margin: 5px 20px 5px 17%;
}
.sb-1::before {
background-color: #EEFFDD;
right: -8px;
}
<div class="chat-messages" style="max-height: 472px; overflow: hidden; width: auto; height: 472px;">
<div class="sb sb-text sb-0">Hi
<div class="sb-time">09:16</div>
</div>
<div class="sb sb-text sb-0">Fine. Thnks
<div class="sb-time">09:19</div>
</div>
<div class="sb sb-text sb-1">What subject u are talking about ?
<div class="sb-time">09:19</div>
</div>
</div>

Answer 1

Have a look at this Jsfiddle.
These are the changes I made:
.sb {
border: 1px solid #000;
}
.sb::before {
height: 12px;
top: 12px;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
left: -9px;
}
EDIT
Updated Jsfiddle to contain the bubble on the right side also.

Answer 2

UPDATE
Prefixes for transform 2D are no longer needed, see CanIUse
.sb {
....
border: 1px solid red;
}
.sb-0::before {
....
border-left: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(35deg) skew(-25deg) translate(-1px, 0);
width: 16px;
height: 14px;
}
.sb-1::before {
....
border-right: 1px solid red;
border-top: 1px solid red;
transform: rotate(35deg) skew(-25deg) translate(1px, 0);
width: 16px;
height: 14px;
}
SNIPPET
body {
background: #000;
}
.chat-messages {
width: calc(100%);
padding-bottom: 5px;
background-color: #666;
}
.sb-time {
font-size: 10pt;
font-weight: 400;
margin: 7px -5px 0px 10px;
float: right;
}
.sb {
font-size: 13pt;
font-weight: 500;
border-radius: 6px;
display: block;
padding: 10px 15px 5px 15px;
position: relative;
vertical-align: top;
clear: both;
border: 1px solid red;
}
.sb-0:before {
content: "\00a0";
display: block;
position: absolute;
top: 10px;
transform: rotate(25deg) skew(-35deg) translate(-1px, 0);
width: 16px;
height: 14px;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
.sb-1:before {
content: "\00a0";
display: block;
position: absolute;
top: 10px;
transform: rotate(25deg) skew(-35deg) translate(1px, 0);
width: 16px;
height: 14px;
border-right: 1px solid red;
border-top: 1px solid red;
}
.sb-0 {
background-color: #ffffff;
float: left;
margin: 5px 17% 5px 20px;
}
.sb-0::before {
background-color: #ffffff;
left: -8px;
}
.sb-1 {
background-color: #EEFFDD;
float: right;
margin: 5px 20px 5px 17%;
}
.sb-1::before {
background-color: #EEFFDD;
right: -8px;
}
<div class="chat-messages" style="max-height: 472px; overflow: hidden; width: auto; height: 472px;">
<div class="sb sb-text sb-0">Hi
<div class="sb-time">09:16</div>
</div>
<div class="sb sb-text sb-0">Fine. Thnks
<div class="sb-time">09:19</div>
</div>
<div class="sb sb-text sb-1">What subject u are talking about ?
<div class="sb-time">09:19</div>
</div>
</div>