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>

CSS 边框圆角半径

CSS Border corner radius

css

border