如何在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

Answer 2

您可以考虑多个背景。曲线的uniqueWordCount和小线的radial-gradient：

linear-gradient

.box {
  width:300px;
  height:200px;
  background:
     linear-gradient(#000,#000) top left/70px 5px,
     linear-gradient(#000,#000) top right/70px 5px,
    
    
     radial-gradient(circle 100px, /*circle with 100px radius*/
       transparent calc(100% - 6px), #000 calc(100% - 5px), /*around 5px border*/
       #000 99%,transparent 100%)
      0 -150px; /*we move the centre of the circle by -150px to top*/
  background-repeat:no-repeat;
}

body {
  background:pink;
}

您可以添加CSS变量以更好地控制不同的值。我将考虑另一种语法，它可以使用另一个<div class="box"></div>来更好地控制顶行，该radial-gradient与主行相同，但尺寸减小，因此我们只看到其中的一小部分，并且将其最后的颜色保持为黑色有我们的台词。

.box {
  --b:5px; /*border*/
  --r:100px; /*radius*/
  --p:50px; /*offset from top */
  height:100px;
  background:
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 100%)
      0 0/100% var(--b),
    
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 99%,transparent 100%);
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box" style="--rad:80px;--p:20px;"></div>

<div class="box" style="--rad:50px;--p:20px;--b:2px"></div>

<div class="box" style="--rad:100px;--p:70px;--b:8px"></div>

Answer 3

使用border-radius无法实现，请尝试使用clip-path