仅使用 CSS 创建形状

Question

我需要使用仅 CSS3.

创建此自定义形状

需要与 CSS 一起使用，而不是 svg。我试图使用此 link 的片段：但我不知道如何正确操作形状。

也可以只做中心形状！我正在用这支笔进行测试：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%;

}
}

Answer 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>

Answer 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>

仅使用 CSS 创建形状

Create a Shape ONLY with CSS

css

sass

css-selectors

css-shapes