Charles Okwuagwu
Charles Okwuagwu

Reputation: 10866

apply 1px borders to CSS speech bubbles?

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>

Upvotes: 0

Views: 632

Answers (2)

zer00ne
zer00ne

Reputation: 43920

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>

Upvotes: 1

Nirmalya Ghosh
Nirmalya Ghosh

Reputation: 2520

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.

Upvotes: 5

Related Questions