仅使用 CSS 创建形状答案

【问题标题】：Create a Shape ONLY with CSS仅使用 CSS 创建形状
【发布时间】：2020-04-19 12:51:51
【问题描述】：

我需要仅使用 CSS3 创建这个自定义形状。

需要使用 CSS，而不是 svg。我试图使用此链接的 sn-ps：Wave (or shape?) with border on CSS3 但我不知道如何正确操作形状。

也可以只有中心形状！我正在用这支笔测试：https://codepen.io/Blumenkranz/pen/vYEeLjr

@mixin push--auto {
    margin: { 
        left: auto;
        right: auto;
    }
}
@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

.section {
  width: 100%;
  height: 50vh;
  background: $blue-dark;
  position:relative;
   &::after, &::before {
    @include pseudo;
    @include  push--auto;
    bottom: -46px; 
    left: 35%;
    width: 250px; 
    height: 150px;
    background: $blue-dark;
   border-radius: 100%;

}
}

【问题讨论】：

要绘制它，您需要绘制椭圆曲线——这是 CSS 难以解决的问题。为什么不能使用 base64 编码的 SVG 背景图片？
因为这对工作来说是一个挑战......我不能使用图像，只能使用 css 来绘制所有内容
+1 回答一个棘手的问题。我无法到达那里让我很烦恼，但this question 和the JSFiddle linked in it 可能会为您指明正确的方向。还有一些答案与您正在寻找的答案有些接近..
@mtr.web 我有点需要做反向边界半径......这个很简单......我需要在里面填充形状，而不是在外面......我还在尝试这里.
您可以尝试三个椭圆形 1. 白色（左） 2. 蓝色（中） 3. 白色（右）css-tricks.com/the-shapes-of-css 并努力将它们重叠以创建效果。不完美，但可能有效。

标签： css sass css-selectors css-shapes

【解决方案1】：

我不知道你为什么要只使用 css 来制作这个，因为 svg 会简单得多，但你可以。我使用与您链接的技术类似的技术对您的形状进行了近似，您可以轻松调整它。

这里是代码。我在 body 上使用 display flex 并在容器上使用 margin auto 将其放置在页面中心以进行显示。

body {
	display: flex;
	height: 100vh;
}
.container {
	margin: auto;
	position: relative;
}
.shape {
	width: 200px;
	height: 200px;
	background-color: #157995;
	transform: rotate(45deg) skew(-10deg,-10deg);
	clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
	border-radius: 15%;
}
.bar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 12px;
	background-color: #157995;
}
.container::before, .container::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 20px;
	background-color: white;
	z-index: 1;
	bottom: 0px;
}
.container::before {
	left: 12.4px;
	border-top-right-radius: 50%;
	transform: skew(55deg);
}
.container::after {
	right: 12.4px;
	border-top-left-radius: 50%;
	transform: skew(-55deg);
}

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="bar"></div>
      <div class="shape"></div>
    </div>
  </body>
</html>

【讨论】：

这绝对合适。非常感谢。

【解决方案2】：

在这里聚会有点晚了，但这是我努力使用的：

一个透明容器（带有可见的顶部边框）
透明容器内的两个背景色伪元素
一个细长的水平矩形；和
一个圆圈

工作示例：

.line {
  position: relative;
  height: 30px;
  border-top: 1px solid rgb(0, 123, 149);
  overflow: hidden;
}

.circle {
  position: absolute;
  top: -80px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: rgb(0, 123, 149);
  border-radius: 50%;
}

.rectangle {
  position: absolute;
  top: -1px;
  left: calc(50% - 64px);
  width: 128px;
  height: 12px;
  background-color: rgb(0, 123, 149);
}

.line::before,
.line::after {
content: '';
position: absolute;
top: -1px;
z-index: 24;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
}

.line::before {
left: calc(50% - 110px);
}

.line::after {
right: calc(50% - 110px);
}

<div class="line">
<div class="rectangle"></div>
<div class="circle"></div>
</div>

【讨论】：

嗯，是的，只是另一个类似的案例。但是感谢分享，不要对我的 cmets 感到气馁。
完全没有，感谢您的反馈。几天前我开始研究一个解决方案，当时我认为可能有 3 个元素和 2 个伪元素。然后我分心了，丢了标签。今天下午我正在整理标签并遇到它（我以为它早就关闭了）。我无法在没有完成解决方案的情况下关闭标签 - 我会第一个同意这真的不是我最好的工作。
(*因为题目规定解决方案必须是CSS解决方案)。
我可以说 SVG 与 HTML 紧密耦合（第一个最好的东西），并且使用 SVG 进行处理比使用公认的 clip-path polygon - clip CanIUse - SVG CanIUse 具有更好的浏览器覆盖率
其实一点也不晚。我可以练习您的解决方案，进行一些更改以适应我的需要。我也在学习:)