Видимо меня не поняли, мне нужно чтобы ы точь-точь также было, чтобы этого треугольника не было, это можно сделать на css? Или это просто картинка впихнута? 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
padding: 50px;
}
.bm{
height: 20px;
width: 100px;
background: pink;
border-radius: 4px 0 0 4px;
display: inline-block;
}
.bm:after{
content: "";
display: inline-block;
float: right;
border: #fff solid 10px;
border-top-color: pink;
border-left-color: pink;
border-bottom-color: pink;
background: #fff;
}
</style>
</head>
<body>
<div class="bm"></div>
</body>
</html>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Средний
Средний
Средний
