如何在css中创建中间有曲线的线答案

【问题标题】：How to create line with curve in the middle in css如何在css中创建中间有曲线的线
【发布时间】：2022-01-13 17:25:54
【问题描述】：

我需要在纯CSS 中创建一条线，中间有一个酒窝。可能吗？如果是这样，我该怎么做？

我熟悉的CSS 规则使整个div 变为半圆形或更改元素边框。

例如：border-radius，或perspective或border-top-radius...

【问题讨论】：

标签： css css-shapes

【解决方案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; }

&lt;div class="thing"&gt;&lt;/div&gt;

jsFiddle

【讨论】：

【解决方案2】：

您可以考虑多种背景。 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;
}

&lt;div class="box"&gt;&lt;/div&gt;

您可以添加 CSS 变量以更好地控制不同的值。我将考虑另一种语法，以使用另一个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>

【讨论】：

@velvetInk 如果我们了解其中的诀窍，这将非常容易；)
你非常擅长径向渐变！我需要阅读它们。您有任何首选的学习资源吗？
@AndyHoffman 不是真的，我通常使用官方规范来了解不同的值及其工作原理（drafts.csswg.org/css-images-3/#radial-gradients）然后我尝试使用它们来实现不同的目标。

【解决方案3】：

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

【讨论】：

你有例子吗？一条线一直穿过