如何在css中创建border-radius？

Question

如何将边框半径朝向内侧？

.circle {
   width:100px;
   height:100px;
   background-color:solid red;
   border-radius:-50px 50px -50px [enter image description here][1]50px;
 }

我知道-50px是不可接受的，但我只是给出一个理论上的例子 请参阅下图以供参考。

Answer 1

SVG

您不应该使用css来创建复杂的形状 请改用SVG。

使用SVG Path创建的形状 除了路径中的3 curves

突出显示每条曲线，以便了解如何创建最终形状。

＆＃13;

＆＃13;

//declare global var for Sound instance
var soundInstance;

function startPlayback(){
    soundInstance = createjs.Sound.play("audio/sound.mp3", {loop: 0});
    createjs.Ticker.addEventListener("tick", tick);
    createjs.Ticker.setInterval(TICK_FREQ);
}

function tick(evt) {
    var progress = soundInstance.position/soundInstance.duration;
    //do something with progress
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许有一些径向渐变：

＆＃13;

＆＃13;

body {
 background:linear-gradient(pink,yellow);
 height:100vh;
 margin:0;
}

.box {
  width:150px;
  height:150px;
  margin:10px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  bottom:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at top left,transparent 44%, red 44.5%);
}
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at bottom left,transparent 44%, red 44.5%);
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;