Triangle with rounded corners

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="arrow">
  <div class="element">
</div>

CSS

body {
    background:#666;
    
}

.arrow {
 position:absolute;
 top:90px;   
  left:20px;    
    transform:scale(3);
}

.element { 
  position:absolute;
  height:10px;
  width:21px;    
  background:#ff0000;
  border-radius:0;
  border-top-right-radius:8px;
    border-top-left-radius:8px;
}

.element:before {
  position:absolute;
  left:4px;
  top:-4px;
   content:'';
  height:7px;
  width:20px;    
  background:#ff0000;
  border-radius:4px;
  transform:rotate(60deg);
}

.element:after {
  position:absolute;
  left:-3px;
  top:-4px;
   content:'';
  height:7px;
  width:20px;    
  background:#ff0000;
  border-radius:4px;
  transform:rotate(-60deg);
}