仅使用 CSS 创建形状
Create a Shape ONLY with CSS
我需要使用 仅 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%;
}
}
我不知道你为什么想只使用 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>
这里的派对有点晚了,但这是我的努力:
- 透明容器(顶部边框可见)
- 透明容器内的两个背景色伪元素
- 细长的水平矩形;和
- 一个圆圈
工作示例:
.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>
我需要使用 仅 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%;
}
}
我不知道你为什么想只使用 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>
这里的派对有点晚了,但这是我的努力:
- 透明容器(顶部边框可见)
- 透明容器内的两个背景色伪元素
- 细长的水平矩形;和
- 一个圆圈
工作示例:
.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>