Charles Okwuagwu Charles Okwuagwu - 5 months ago 24
CSS Question

apply 1px borders to CSS speech bubbles?


This question applies specifically to the code included bellow.


Please 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>





EDIT:

Please i have updated the post to include the right-sided bubbles as well.

Answer

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.