html - 如何用 CSS 圆整直线？

Question

我想用 CSS 对直线进行舍入。但我没有成功。我该怎么做？谢谢。

截图：
- 设计：https://imgur.com/RCuJOVw
- 我的 Css 代码：https://imgur.com/ssMLQkl

.steps {
    margin-left: 80px;
    margin-top: 100px;
    display: inline-block;
    position: relative;

    &:before {
       content: '';
       position: absolute;
       top: -130px;
       right: 50px;
       width: 30px;
       height: 1px;
       background-color: #eff0f1;
    }
}

标签： htmlcsssassfrontend

Answer 1

border-top-right-radius在您的边界上使用。

div {
  width: 50px;
  height: 100px;
  border-top: 3px solid grey;
  border-right: 3px solid grey;
  border-top-right-radius: 15px;
}

<div></div>