CSS边框角半径

Question

我该如何复制？

我需要使用CSS进行此操作，但是我只能用2条单独的线完成外部部分：

.top-left {
  position: absolute;
  background: black;
  height: 3px;
  width: 4rem;
  top: 0;
  left: 0;
  border-top-left-radius: 150px;
}

.left-top {
  position: absolute;
  background: black;
  height: 4rem;
  width: 3px;
  top: 0;
  left: 0;
  border-bottom-left-radius: 150px;
}

<div class="top-left"></div>
<div class="left-top"></div>

Answer 1

您可以使用一个元素和一些渐变但不设置透明度来做到这一点：

.box {
  width:200px;
  height:100px;
  border-radius:20px;
  padding:5px;
  background:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(red,red)       top left    /60px 40px,
    linear-gradient(blue,blue)     top right   /60px 40px,
    linear-gradient(green,green)   bottom left /60px 40px,
    linear-gradient(purple,purple) bottom right/60px 40px;
  background-repeat:no-repeat;
}

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