CSS curve wave background

Question

I am a new learner of html and css. I want to make my circle orange background curve wave using only css not using background-image or svg. Like the screenshot:

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

Without using background image curve just css in (.circle-inner). But I am failed to making this. I am tried a lot. I upload my html and css code.

My html and css code:

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

@Saharsh I want the curve or wave like this: https://i.stack.imgur.com/rDQeY.png — Sharwar Aman Symon, Feb 06 '18 at 06:13
An SVG can be easily embedded in your HTML, it is XML in the end, and it would give you the level of customization you need here. — Andry, Feb 06 '18 at 06:18
The curving is what bothers me a little. Probably you can, maybe. But it is gonna be a complex structure in the end. If you do this in SVG it is going to be a few lines. In pure CSS you will end up with more stuff, not easy to maintain in the future. In my opinion, going for SVG fits better your scenario. Why do you think we have SVG? You are trying to create a piece of complex graphics... — Andry, Feb 06 '18 at 06:22
@Andry Because I will fill the circle with the orange color with the points condition in js. So, in js condition I will add the css class to up/down the orange background. — Sharwar Aman Symon, Feb 06 '18 at 06:26
It's not really impossible to achieve the curves in CSS but it will be very complex and/or may not be responsive. SVG is a better pick in this case. — Saharsh, Feb 06 '18 at 07:05
@Saharsh I got svg and with background-image. I need in pure css if complex no problem.No need responsive. — Sharwar Aman Symon, Feb 06 '18 at 07:09
@SharwarAmanSymon: You are trying to do one thing can could be achieved simply with one technology, SVG, by using a more complex solution employing 3 technologies: HTML, CSS and Javascript. — Andry, Feb 06 '18 at 07:09
I tried my best with SVG, if you want to use it sometime. [jsFiddle](https://jsfiddle.net/ftgmth7d/). — Patrick Mlr, Feb 06 '18 at 07:09
Never Say Never lol. It can be done in just CSS. Check my answer. — Jonny, Feb 06 '18 at 07:53

Jonny · Answer 1 · 2018-02-07T09:19:23.317

I used Div Containers and CSS to reproduce your required results. Feel free to tweak as you need. First i made a div container with a border or 50% on all sides for our circle. Next i built 2 more divs with a border radius and gradient and rotated them to place to create the results. Hope it helps.

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

it looks good but Not as that I want. Because in my code there is class " .circle-inner:after " . I want the curve only top in this class. because I will up down that with %. using top. — Sharwar Aman Symon, Feb 06 '18 at 08:33

score 2 · Answer 2 · answered Feb 06 '18 at 07:07

Try this.

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

score 1 · Answer 3 · answered Feb 06 '18 at 06:22

1

Have a look at the example below.

You can take help of SVG Cubic Bezier curves to create complex shapes. You need to specify three sets of coordinates.

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

Check this link: 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>

answered Feb 06 '18 at 06:22

pixlboy

1,452
13
30

No svg or background image. I need only css – Sharwar Aman Symon Feb 06 '18 at 06:49
1

Not sure why do you need to be rigid about it. You can try and discover a new way then. Let the whole developer community know if you are able to achieve that with current CSS standards. Good luck. – pixlboy Feb 06 '18 at 06:54

CSS curve wave background

3 Answers3