css - 修改圆形CSS的边框

Question

这在codepen中非常有解释性。我想要移除的方形部分，我尝试了透明度和其他东西，但我无法让它工作。

你怎么能调整一个圆的角度或剪掉它的某个部分？我当前的 CSS 代码是这样的

.circle {
   -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 90px 0px 90px 90px;
    border: solid 25px#396bb3;
    width:50px;
    height:50px;  
  }

Codepen 演示

Answer 1

演示：http: //jsfiddle.net/LsC7b/

.circle {
  -moz-border-radius: 90px;
  -webkit-border-radius: 90px;
  border-radius: 90px;
  border: solid 25px#396bb3;
  width:50px;
  height:50px;  
  border-top-color:transparent;

  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 2

四边的边界半径应相等

border-radius: 90px 90px 90px 90px;

演示：http ://codepen.io/anon/pen/iohKA

更新：

border-top-color: #fff;
border-right-color: #fff;
transform:rotate(45deg);
-moz-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg);

演示：http ://codepen.io/anon/pen/BjhuF