Check the page:
http://www.cssarrowplease.com/
In HTML: {{type}} is tow way binding in Angular, three types: text, data, voice
<div class="chart-area {{type}} arrow_box">
SASS:
According to different media and class type, change the position :
@mixin respond-to($type: min-width, $query: 960px) {
@media ($type: $query) {
@content;
}
}
.arrow_box {
padding: 5px;
position: relative;
background: #FFF !important;
border: 2px solid #FFBE00;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height:;
width:;
position: absolute;
pointer-events: none;
}
.voice.arrow_box:after, .voice.arrow_box:before {
left: 10%;
@include respond-to(max-width, 599px) {
left: 15%;
}
}
.text.arrow_box:after, .text.arrow_box:before {
left: 30%;
@include respond-to(max-width, 599px) {
left: 50%;
}
}
.data.arrow_box:after, .data.arrow_box:before {
left: 50%;
@include respond-to(max-width, 599px) {
left: 85%;
}
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #FFF;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(255, 190, 0, 0);
border-bottom-color: #FFBE00;
border-width: 23px;
margin-left: -23px;
}