Triangle with rounded tip, with CSS

Question

I'm trying to make a triangle with the rounded top tip, but it just produces a normal triangle and 1/2 circle.

.myT{ 
width: 350px;
    height: 233px;
    background-color: #5cb85c;
    -moz-border-radius:  0% 0% 50% 50% / 0% 0% 100% 100%;
    -webkit-border-radius:  0% 0% 50% 50% / 0% 0% 100% 100%;
    border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
}

Answer 1

Use a before element to create a triangle with a blunt tip, and an after element to create a circle to round out the tip.

http://codepen.io/andrewray/pen/QddQWg

.triangle {
  position:relative;
  height:10px;
  width:10px;

  &:before {
    content: '';
    display:block;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 0 100px 100px 100px;
    border-color: transparent transparent #007bff transparent;
  }

  &:after {
    content: '';
    display:block;
    width: 12px;
    height: 12px;
    position:absolute;
    top:8px;
    left:99px;
    border-radius: 100%;
    background:#007bff;
  }
}

Tweak values as needed