带圆角的三角形，带CSS

Question

我试图制作一个圆顶尖端的三角形，但它只产生一个普通的三角形和1/2圆。

.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

使用before元素创建一个带有钝尖的三角形，并使用after元素创建一个圆形以使尖端变圆。

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;
  }
}

根据需要调整值