CODEWITHSUNDEEP
csshtml
omprakash sharma
omprakash sharma

Reputation: 81

Design chat textbox with rounded border

I have to create the chat application textbox as a below attached image, I have tried but I cannot create the textbox as it was there presented.

enter image description here

.leftpanel-messages {
    background-color: #FFFFFF;
    padding: 5px 5px 0px 5px;
    float: left;
}
.leftpanel-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.leftpanel-messages ul li {
    display:inline-block;
    clear: both;
    padding: 5px 15px 5px 10px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    position: relative;
}
.him {
    background: transparent;
    border:1px solid #eee;
    float: left;
}
.him > p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}

.me {
    float: right;
    background: #0084ff;
    color: #fff;
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
  <div class="" style="padding:15px 10px 0 10px;">
      <ul>
          <li class="him">
              <p>Text message send by him</p>
              <div></div>
          </li>
      </ul>
  </div>
</div>

Can anyone help me to append the right corner at the end of the textbox?

Upvotes: 0

Views: 347

Answers (1)

Heidel
Heidel

Reputation: 3254

Using :before and :after

.leftpanel-messages {
    background-color: #FFFFFF;
    padding: 5px 5px 0px 5px;
    float: left;
}
.leftpanel-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.leftpanel-messages ul li {
    display:inline-block;
    clear: both;
    padding: 5px 15px 5px 10px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    position: relative;
}
.him {
    background: transparent;
    border:1px solid #eee;
    float: left;
    position: relative;
}
.him > p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}

.me {
    float: right;
    background: #0084ff;
    color: #fff;
}

.him:before {
  width: 0;
      height: 0;
      border-style: solid;
      border-width: 13px 0 0 13px;
      border-color: transparent transparent transparent #eee;
      position: absolute;
      content: '';
      bottom: -1px;
      right: -12px;
      transform: scale(0.7, 1);
}

.him:after {
     width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 0 0 12px;
      border-color: transparent transparent transparent #ffffff;
      position: absolute;
      content: '';
      bottom: 0;
      right: -10px;
      transform: scale(0.7, 1);
}
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
  <div class="" style="padding:15px 10px 0 10px;">
      <ul>
          <li class="him">
              <p>Text message send by him</p>
              <div></div>
          </li>
      </ul>
  </div>
</div>

Or you can just use only one pseudo-element :before with background-image with a little triangle.

Upvotes: 3

Related Questions