CSS曲线波浪背景

Question

CSS曲线波浪背景

htmlcsscurvewave

3

我是一名HTML和CSS的新学习者。我想使用纯CSS而不是背景图片或SVG来制作我的圆形橙色背景曲线波浪。就像屏幕截图：

https://istack.dev59.com/rDQeY.webp

在(.circle-inner)中不使用背景图片曲线，只使用CSS。但我一直尝试失败。我上传了我的HTML和CSS代码。

我的HTML和CSS代码：

.circle-inner {
    width: 310px;
    height: 310px;
 background-color:#d1132f;
 background-repeat:no-repeat;
    margin: 0 auto;
    border-radius: 100%;
 border: 1px solid #ff8403;
 display:table;
 position: relative;
    z-index: 1;
    overflow: hidden;
}

.circle-points {
    display:  table-cell;
    vertical-align:  middle;
    margin:  0 auto;
    text-align:  center;
 color: #fff;
}
.circle-points h2 {
    margin:  0;
    font-size: 68px;
}

.circle-points span {
    display:  block;
    font-size: 26px;
}

/* if circle reset */
.circle-inner:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    content: '';
    z-index: -1;
 
    background: #ffc815; /* Old browsers */
    background: -moz-linear-gradient(left, #ffc815 0%, #ff7e01 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffc815 0%,#ff7e01 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffc815 0%,#ff7e01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc815', endColorstr='#ff7e01',GradientType=1 ); /* IE6-9 */     
}

/* if point 1 */
.circle-inner:after {
    /* background-color:orange; */
    top: 60%;     
}

<div class="circle-area">
    <div class="circle-inner">
        <div class="circle-points">
            <h2>1</h2><span>Point</span>
        </div>         
    </div>
</div>

- Sharwar Aman Symon

SVG 可以轻松地嵌入到你的 HTML 中，它最终是 XML，并且可以为你提供所需的个性化定制水平。 - Andry

@rach8garg 这在 CSS 中不可能吗？ - Sharwar Aman Symon

@Andry 在 CSS 中不可能吗？ - Sharwar Aman Symon

弯曲是我有点困扰的地方。也许你可以，但最终会变成一个复杂的结构。如果你用SVG做这个，只需要几行代码就可以了。如果用纯CSS，你会得到更多的东西，未来难以维护。在我看来，选择SVG更适合你的情况。你认为为什么我们有SVG呢？你正在尝试创建一件复杂的图形作品... - Andry

1

我尽力使用SVG了，如果您想在某个时候使用它。jsFiddle。 - Patrick Mlr

显示剩余9条评论

3个回答

2

试一下这个。

#yin-yang {
  display: flex;
  align-items: center;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: linear-gradient(black 50%, #3ed89c 0);
}
#yin-yang:before, #yin-yang:after {
  flex: 1;
  height: 50%;
  border-radius: 50%;
  background: black;
  content: "";
}
#yin-yang:after { 
  background: #3ed89c;
}

<div id="yin-yang"></div>

- Saravana

1

请看下面的示例。

您可以借助SVG二次贝塞尔曲线创建复杂形状。您需要指定三组坐标。

C x1 y1，x2 y2，x y（或c dx1 dy1，dx2 dy2，dx dy）

查看此链接：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

- pixlboy

没有SVG或背景图像。我只需要CSS。 - Sharwar Aman Symon

1

不确定为什么你需要这么死板。你可以尝试发现一种新的方式。如果你能够在当前的CSS标准下实现它，让整个开发者社区都知道。祝你好运。 - pixlboy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonny · Accepted Answer

我使用Div容器和CSS来复制您需要的结果。随意进行调整。首先，我创建了一个带有50％边框的Div容器，用于制作圆形。接下来，我建立了另外两个具有边框半径和渐变效果的Div，并将它们旋转以创建所需的结果。希望这可以帮助您。

.circleContainer{
width:400px;
height:400px;
border-radius:50%;
background-color:#ffcc33;
margin-left:30%;
margin-top:5%;
position:absolute;
overflow:hidden;
transform:rotate(17deg);
}
.splitA{
width:100%;
height:40%;
float:left;
background-color:#cc0066;
}
.curveOne{
width:100%;
position:absolute;
height:60%;
float:left;
transform:rotate(-50deg);
margin-left:-13%;
margin-top:-7%;
border-bottom-left-radius:60%;
border-top-left-radius:0%;
background: linear-gradient(to bottom, red,  #cc0066); 
}
.curveTwo{
width:100%;
position:absolute;
height:60%;
float:left;
margin-left:20%;
margin-top:45%;
transform:rotate(-50deg);
border-bottom-right-radius:0%;
border-top-right-radius:40%;
background: linear-gradient(to top, #cc6600, #ff9933, #ffcc33); 
}

<div class="circleContainer">
<div class="splitA"><div class="curveOne"></div></div>
<div class="curveTwo"></div>
</div>