如何在css中绘制曲线边框

Question

我想用唯一的 CSS 创建与本文下面附加的相同边框。这可能吗？如果可以的话，该怎么办呢？

我的代码和我想通过 .curve::after {}:

创建它

<ul>
  <li class="curve"></li>
</ul>

谢谢！

Answer 1

由于问题中没有足够的细节，我只能为您构建以下内容。根据您的需要修改：

ul {
  list-style: none;
}

.curve {
  width: 300px;
  padding: 30px;
  margin: 30px;
  border-bottom: 2px dashed #ccc;
  position: relative;
}

.curve::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-bottom: 2px dashed #ccc;
  border-left: 2px dashed #ccc;
  transform: rotate(360deg);
  border-bottom-left-radius: 50%;
}

.curve::after {
  content: "";
  position: absolute;
  bottom: -32px;
  right: -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-bottom: 2px dashed #ccc;
  border-right: 2px dashed #ccc;
  transform: rotate(270deg);
  border-bottom-right-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Curve Border</title>
  </head>
  <body>
    <ul>
      <li class="curve"></li>
    </ul>
  </body>
</html>

如何在css中绘制曲线边框

问题描述投票：0回答：1

1个回答

最新问题

如何在css中绘制曲线边框

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1