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 Demo

Answer 1

DEMO ：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

修改圆CSS的边框

2 个答案: