CSS曲线波浪背景

Posted 2023-02-25

【中文标题】CSS曲线波浪背景

【英文标题】：CSS curve wave background

【发布时间】：2018-02-06 06:05:37

【问题描述】：

我是 html 和 css 的新手。我想只使用css而不使用背景图像或svg来制作我的圆形橙色背景曲线波浪。喜欢截图：

https://i.stack.imgur.com/rDQeY.png

不使用背景图像曲线，只需 css in (.circle-inner)。但我没能做到这一点。我尝试了很多。我上传了我的 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>

【问题讨论】：

这可能会有所帮助 - colorzilla.com/gradient-editor

@Saharsh 我想要这样的曲线或波浪：i.stack.imgur.com/rDQeY.png

为什么不选择 SVG？

一个 SVG 可以很容易地嵌入到您的 HTML 中，它最终是 XML，它可以为您提供所需的自定义级别。

如果您想在某个时候使用它，我已尽力使用 SVG。 jsFiddle.

【参考方案1】：

我使用 Div Containers 和 CSS 来重现您需要的结果。根据需要随意调整。首先，我为我们的圆圈制作了一个带有边框或 50% 的 div 容器。接下来，我构建了另外 2 个具有边框半径和渐变的 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>

【讨论】：

看起来不错，但不是我想要的。因为在我的代码中有类“.circle-inner:after”。我只希望曲线在本课程中名列前茅。因为我会用 % 来降低它。使用顶部。

【参考方案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>

【参考方案3】：

看看下面的例子。

您可以借助 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   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>

【讨论】：

没有 svg 或背景图片。我只需要css

不知道为什么你需要对此保持严格。你可以尝试并发现一种新的方式。让整个开发者社区知道您是否能够使用当前的 CSS 标准来实现这一目标。祝你好运。