曲线css圆形边框

Question

如何在此曲线的顶部和底部获得圆形边框。查看这张图片的白线，这就是我想用CSS实现的。 Something like this

我的片段：

＆＃13;

＆＃13;

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}

＆＃13;

<div class="curved-line"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用:before＆amp; :after伪元素。

.curved-line:before {
  content: '';
  position: absolute;
  top: 95%;
  left: -12px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

.curved-line:after {
  content: '';
  position: absolute;
  top: 95%;
  right: -11.5px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

请看下面的代码段：

＆＃13;

＆＃13;

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
  position: relative;
}

.curved-line:before {
  content: '';
  position: absolute;
  top: 95%;
  left: -12px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

.curved-line:after {
  content: '';
  position: absolute;
  top: 95%;
  right: -11.5px;
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background: black;
}

＆＃13;

<div class="curved-line"></div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

您可以在曲线类之前和之后使用伪元素。

.curved-line {
  position: relative;
  width: 180px;
  height: 90px;
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
}

.curved-line:before {
  content: '';
  position: absolute;
  left: 99%;
  top: 91%;
  background-color: black;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.curved-line:after {
  content: '';
  position: absolute;
  left: -7%;
  top: 91%;
  background-color: black;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

<div class="curved-line"></div>

Answer 3

var c = document.getElementById("curvedLine");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 140, 170, 140, 170, 20);
ctx.lineWidth = 10; //width of the line
ctx.lineCap = 'round';
ctx.stroke();

<canvas id="curvedLine"></canvas>

您也可以使用canvas执行此任务

Answer 4

您可以使用css伪类对边框进行舍入。

＆＃13;

＆＃13;

.curved-line {
  position: absolute;
  width: 180px;
  height: 90px;
  border: solid 12px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
 .curved-line:after{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 86px;
  display: block;
 left: -11px;
}
 .curved-line:before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 86px;
  display: block;
 left: 179px;
}

＆＃13;

<div class="curved-line"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用前后，所以你知道使用弯曲尝试使用3曲线叠加：）

＆＃13;

＆＃13;

.curved-line {
  position: absolute;
  width: 180px;
  height: 100px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: black transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
.curved-line:before {
  content:'';
  position: absolute;
  width: 25px;
  height: 25px;
  left: 115px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}
.curved-line:after {
  content:'';
  position: absolute;
  width: 25px;
  height: 25px;
  left: -74px;
/*   background: black; */
  border: solid 12.5px #000;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 45px;
  margin-top: 60px;
}

＆＃13;

<div class="curved-line"></div>

＆＃13;

＆＃13;

＆＃13;