矩形的圆形效果

Question

我试图按图像显示设计，但主要问题是我不能在那里使用z-index，因为它会影响其他元素。有没有办法实现这个目标？谢谢

Answer 1

您可以使用伪元素创建类似的内容。

.element {
  width: 400px;
  height: 45px;
  position: relative;
  overflow: hidden;
  border: 2px solid orange;
  border-bottom: none;
}
.element:after {
  content: '';
  width: 210%;
  height: 700px;
  left: 50%;
  border-radius: 50%;
  border: 2px solid orange;
  position: absolute;
  transform: translateX(-50%);
}

<div class="element"></div>