.tricornbutton{
padding: 0px !important;
color:white;
}

.tricornbutton:after{
content:"";
display: block;

border-top: 120px solid transparent;
border-right: 100px solid;
margin-top:-120px;
}

.colorturq{
background-color: turquoise;
}

.colorturq:after{
border-right-color: teal;
}

.colordark{
background-color: #333;
}

.colordark:after{
border-right-color: black;
}

.colorgrey{
background-color: #777;
}

.colorgrey:after{
border-right-color: #444;
}

.tricontitle:before{
padding-left:10px;
content:""
}

.tricontitle{
padding: 0px !important;
color:white;
font-family: 'Raleway-Bold';
 -moz-font-feature-settings:"lnum" 1;
-ms-font-feature-settings:"lnum" 1;
-o-font-feature-settings:"lnum" 1;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1; 
font-weight:bold;
font-size:18px;
background-color: #a71e25;
display:inline-block;
margin-bottom:10px;
padding-left:10px;
line-height: 50px;
}

.tricontitle:after{
content:"";
display: block;
padding-left:350px;
border-top: 120px solid transparent;
border-right: 100px solid;
margin-top:-120px;
color:white;
}

@media only screen and (max-width: 380px){
  .tricontitle{
    width: 100%;
  }
  .tricontitle:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 50px solid #fff;
    padding-left: 0;
    margin-top: 0;
    position: relative;
    top: 0px;
    right: 0;
    float: right;
  }
}
@media only screen and (max-width: 480px) and (min-width: 380px) {
  .tricontitle{
    width: 100%;
  }
  .tricontitle:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 50px solid #fff;
    padding-left: 0;
    margin-top: 0;
    position: relative;
    top: 0px;
    right: 0;
    float: right;
  }
}