[SASS] Make a responsive arrow box

Check the page:
http://www.cssarrowplease.com/

In HTML: {{type}} is tow-in-Angular, three types:text, data, voice

<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:0;width:0;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, 0, 0);Border-bottom-color:#FFBE00;Border-width:23px;Margin-left:-23px;}

[SASS] Make a responsive arrow box