chat-css/triangle-right.css at master · 10MINT/chat-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* ========================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ======================================================================== */

.right, .left {
  border-radius:5px;
  }

/* Variant : for left positioned speech bubble
---------------------------------------------- */

.left {
  margin-left:40px;
}

/* Variant : for right positioned speech bubble
---------------------------------------------- */

.right {
  margin-right:40px;
}

/* THE TRIANGLE
----------------------- */

/* creates triangle */

.left:after, .right:after {
  content:"";
  position:absolute;
  border-style:solid;
  display:block;
  width:0;
  top:0;
  white-space:normal;
}

/* Variant : left
------------------------------------------ */

.left:after {
  left:-40px; /* value = - border-left-width - border-right-width */
  border-width: 0 50px 25px 0;/* vary these values to change the angle of the vertex*/
  border-color: transparent var(--bg-color-left);
}

/* Variant : right
------------------------------------------ */

.right:after {
  right:-40px; /* value = - border-left-width - border-right-width */
  border-width: 0 0 25px 50px; /* vary these values to change the angle of the vertex */
  border-color: transparent var(--bg-color-right);
}