ios sms css

1<section>
2    <div class="from-me">
3      <p>Hey there! What's up?</p>
4    </div>
5  <div class="clear"></div>
6    <div class="from-them">
7      <p>Checking out iOS7 you know..</p>
8    </div>
9  <div class="clear"></div>
10    <div class="from-me">
11      <p>Check out this bubble!</p>
12    </div>
13  <div class="clear"></div>
14    <div class="from-them">
15      <p>It's pretty cool!</p>
16    </div>
17  <div class="clear"></div>
18    <div class="from-me">
19      <p>Yeah it's pure CSS & HTML</p>
20    </div>
21  <div class="clear"></div>
22    <div class="from-them">
23      <p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p>
24    </div>
25  </section>

1body {
2  font-family: "Helvetica Neue";
3  font-size: 20px;
4  font-weight: normal;
5}
6
7section {
8  max-width: 450px;
9  margin: 50px auto;
10}
11section div {
12  max-width: 255px;
13  word-wrap: break-word;
14  margin-bottom: 20px;
15  line-height: 24px;
16}
17
18.clear {
19  clear: both;
20}
21
22.from-me {
23  position: relative;
24  padding: 10px 20px;
25  color: white;
26  background: #0B93F6;
27  border-radius: 25px;
28  float: right;
29}
30.from-me:before {
31  content: "";
32  position: absolute;
33  z-index: -1;
34  bottom: -2px;
35  right: -7px;
36  height: 20px;
37  border-right: 20px solid #0B93F6;
38  border-bottom-left-radius: 16px 14px;
39  -webkit-transform: translate(0, -2px);
40}
41.from-me:after {
42  content: "";
43  position: absolute;
44  z-index: 1;
45  bottom: -2px;
46  right: -56px;
47  width: 26px;
48  height: 20px;
49  background: white;
50  border-bottom-left-radius: 10px;
51  -webkit-transform: translate(-30px, -2px);
52}
53
54.from-them {
55  position: relative;
56  padding: 10px 20px;
57  background: #E5E5EA;
58  border-radius: 25px;
59  color: black;
60  float: left;
61}
62.from-them:before {
63  content: "";
64  position: absolute;
65  z-index: 2;
66  bottom: -2px;
67  left: -7px;
68  height: 20px;
69  border-left: 20px solid #E5E5EA;
70  border-bottom-right-radius: 16px 14px;
71  -webkit-transform: translate(0, -2px);
72}
73.from-them:after {
74  content: "";
75  position: absolute;
76  z-index: 3;
77  bottom: -2px;
78  left: 4px;
79  width: 26px;
80  height: 20px;
81  background: white;
82  border-bottom-right-radius: 10px;
83  -webkit-transform: translate(-30px, -2px);
84}