CSS中的弧形边框

Question

我正在尝试在div /面板的右边框中制作弧形，如果有任何方法可以告诉我。附件是模型的快照。

Answer 1

您可以在CSS中达到此效果。示例如下。

＆＃13;

＆＃13;

.wrap {
  position: relative;
  width: 100px;
  height: 400px;
  background-color: pink;
  overflow: hidden;
}

.wrap::before {
  content:'';
  width: 300px;
  height: 600px;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left:-280px;
  background-color: tomato;
}

.wrap::after {
  content:'';
  width: 300px;
  height: 600px;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -280px;
  margin-left:-290px;
  background-color: white;
}

＆＃13;

<div class="wrap">
</div>

＆＃13;

＆＃13;

＆＃13;