css - 如何在css中创建中间有曲线的直线

Question

我需要在纯 CSS 中创建一条中间有酒窝的线。是否可以？如果可以，我该怎么做？

我熟悉的CSS规则可以让整个div变成半圆形或者改变元素边框。

例如:border-radius，或者perspective或者border-top-radius...

Answer 1

这是我使用绝对定位的伪内容和相对容器的做法。我在 ::after 内容中创建了一个椭圆形，并使用 overflow: hidden 隐藏了它的上半部分。

.thing {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.thing::before,
.thing::after {
  content: '';
  z-index: 1;  
  position: absolute;
}

.thing::before {
  border-top: 2px solid black;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;  
}

.thing::after {
  border-radius: 60%;
  left: 20px;
  right: 20px;
  height: 300px;
  border: 2px solid black;
  top: -234px;
  background-color: white;
}

html { margin: 3em; }

<div class="thing"></div>

jsFiddle