Question

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

需要使用CSS，而不是svg。我试图使用此链接的摘录：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%;

}
}

Answer 1

我不知道为什么您只想使用CSS来实现此目的，因为SVG会更简单，但是您就可以了。我对您的形状进行了近似处理，可以使用与链接的方法类似的技术轻松进行调整。

这是代码。我在主体上使用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创建形状

2 个答案: