Forked from Chris Coyier's Pen EVWQgw.
Forked from Chris Coyier's Pen EVWQgw.
Forked from Chris Coyier's Pen EVWQgw.
Forked from Chris Coyier's Pen EVWQgw.
<!-- attempting to imitate the graph in this screenshot --> | |
<!-- http://cl.ly/3d2Q0Z3w3Q1f/o --> | |
<!-- pointer made from inspiration from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ --> | |
<div class="graph-container"> | |
<div class="pointer-bubble"> | |
<p class="pointer" id="may9">Monday, May 9</p> | |
<p class="pointer" id="viewer-count">56 Viewers</p> | |
</div> | |
<div class="chart-box"> | |
<svg viewBox="0 0 510 200" class="chart"> | |
<defs> | |
<marker id="circle" markerWidth="4" markerHeight="4" refx="2" refy="2"> | |
<circle cx="2" cy="2" r="2" stroke="none" fill="#3887cc"/> | |
</marker> | |
</defs> | |
<polygon | |
fill="#eef3f7" | |
stroke="none" | |
stroke-width="4" | |
points=" | |
0, 72, | |
4, 72, | |
30, 105, | |
34, 105, | |
60, 72, | |
64, 72, | |
90, 82, | |
94, 82, | |
120, 57, | |
124, 57, | |
150, 51, | |
154, 51, | |
180, 45, | |
184, 45, | |
210, 81, | |
214, 81, | |
240, 64, | |
244, 64, | |
270, 87, | |
274, 87, | |
300, 63, | |
304, 63, | |
330, 33, | |
334, 33, | |
360, 69, | |
364, 69, | |
390, 58, | |
394, 58, | |
420, 105, | |
424, 105, | |
450, 97, | |
454, 97, | |
480, 57, | |
484, 57, | |
510, 70, | |
514, 70, | |
514, 220, | |
0, 220" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-start="url(#circle)" | |
marker-end="url(#circle)" | |
points=" | |
4, 72 | |
30, 105 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
34, 105 | |
60, 72 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
64, 72 | |
90, 82 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
94, 82 | |
120, 57 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
124, 57 | |
150, 51 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
154, 51 | |
180, 45 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
184, 45 | |
210, 81 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
214, 81 | |
240, 64 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
244, 64 | |
270, 87 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
274, 87 | |
300, 63 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
304, 63 | |
330, 33 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
334, 33 | |
360, 69 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
364, 69 | |
390, 58 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
394, 58 | |
420, 105 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
424, 105 | |
450, 97 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
454, 97 | |
480, 57 | |
" | |
/> | |
<polyline | |
fill="none" | |
stroke="#cad7e3" | |
stroke-width="2" | |
marker-end="url(#circle)" | |
points=" | |
484, 57 | |
510, 70 | |
" | |
/> | |
</svg> | |
<div class="x-labels"> | |
<div class="may1">May 1</div> | |
<div class="may6">May 6</div> | |
<div class="may15">May 15</div> | |
</dev> | |
<div class="y-labels"> | |
<div class="y-label fifty">50</div> | |
<div class="y-label spacer"></div> | |
<div class="y-label fifteen">15</div> | |
</div> | |
</div> | |
</div> |
body { | |
/* background: #ccc; */ | |
padding: 20px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
body, html { | |
height: 100%; | |
} | |
.graph-container { | |
position: relative; | |
} | |
.pointer-bubble { | |
position: relative; | |
left: 10.2em; | |
bottom: -3.5em; | |
opacity: 0.9; | |
} | |
.chart { | |
background: white; | |
width: 500px; | |
height: 200px; | |
border-left: 1px dotted #555; | |
border-bottom: 1px dotted #555; | |
padding: 20px 20px 20px 0; | |
} | |
.x-labels, .y-labels { | |
color: gray; | |
font-size: 0.7em; | |
} | |
.x-labels { | |
position: relative; | |
bottom: 0px; | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
.may6{ | |
margin-left: 13em; | |
} | |
.may15 { | |
margin-left: 19em; | |
} | |
.y-labels { | |
position: relative; | |
bottom: 19em; | |
right: 64em; | |
display: flex; | |
flex-direction: column; | |
justify-content: flex-start; | |
} | |
.y-label.spacer { | |
height: 8em; | |
} | |
#pointer { | |
width: 120px; | |
height: 80px; | |
background: red; | |
position: relative; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
} | |
#pointer:before { | |
content:""; | |
position: absolute; | |
right: 100%; | |
top: 26px; | |
width: 0; | |
height: 0; | |
border-top: 13px solid transparent; | |
border-right: 26px solid red; | |
border-bottom: 13px solid transparent; | |
} | |
.pointer { | |
color: #ffffff; | |
} | |
p#may9 { | |
margin: 0 0; | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 0.8em; | |
} | |
p#viewer-count { | |
margin: 0.3em 0 0 0; | |
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
font-size: 0.9em; | |
} | |
.pointer-bubble { | |
border-radius: 4px; | |
text-align: center; | |
position: relative; | |
width: 8em; | |
height: 2em; | |
padding: 10px; | |
color: #000; | |
background: #5b5b5b; | |
} | |
.pointer-bubble:after { | |
content:""; | |
position: absolute; | |
bottom: -10px; | |
left: 4em; | |
border-width: 10px 10px 0; /* vary these values to change the angle of the vertex */ | |
border-style: solid; | |
border-color: #5b5b5b transparent; | |
display: block; | |
width:0; | |
} |
Forked from Chris Coyier's Pen EVWQgw.
Forked from Chris Coyier's Pen EVWQgw.