Create a Shape ONLY with CSS

Question

I need to create this custom shape with only CSS3.

Need to be with CSS, not svg. I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate shapes properly.

Also can be only the center shape! I'm testing with this pen: 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%;

}
}

To draw that you will need to draw elliptical curves—something that CSS struggle with. Why can’t you use a base64 encoded SVG background image? — Terry, Dec 30 '19 at 20:38
Because this is a challenge for a job... i can't use images, only css to draw everything — Amanda Natallie, Dec 30 '19 at 20:42
+1 for a tough question. It's bugging me that I can't get there, but [this question](https://stackoverflow.com/questions/23034962/css-shape-creation-curved-wave) and [the JSFiddle linked in it](http://jsfiddle.net/DYYWU/1/) might point you in the right direction. There are also some answers that are somewhat close to what you're looking for.. — mtr.web, Dec 30 '19 at 20:58
@mtr.web i kinda need to make inverse border radius... this one is simple... and i need to fill the shape inside, not outside... I'm still trying here. — Amanda Natallie, Dec 30 '19 at 21:23
You could try three ovals 1. white (left) 2. blue (center) 3. white (right) https://css-tricks.com/the-shapes-of-css/ and work on overlapping them to create the effect. Not perfect, but might work. — Nathaniel Flick, Dec 30 '19 at 21:25
Tell them if they don't want the job done the right way they are wasting everyone's time. — Carol McKay, Jan 02 '20 at 08:38
Sounds promising @NathanielFlick. I'll try it, and post the result. thanks! — Amanda Natallie, Jan 02 '20 at 12:35

MikhaD · Accepted Answer · 2020-01-17T19:26:17.200

I don't know why you want to make this using only css, as svg would be much simpler, but here you go. I made an approximation of your shape, which you can easily adjust, using a similar technique to the one you linked.

Here is the code. I'm using display flex on the body and margin auto on the container to position it in the center of the page for display purposes.

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>

This definitely fits. Thank you very much. – Amanda Natallie Jan 10 '20 at 19:54 — Amanda Natallie, Jan 10 '20 at 19:54

Rounin · Answer 2 · 2020-01-18T18:54:00.520

1

A little bit late to the party here, but this was my effort using:

a transparent container (with a visible top border)
two background-coloured pseudo-elements inside the transparent container
a slim horizontal rectangle; and
a circle

Working Example:

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

edited Jan 18 '20 at 18:54

answered Jan 17 '20 at 16:26

Rounin

27,134
9
83
108

Coloring something `#fff` just to coverup shape is not the way to go. – Roko C. Buljan Jan 17 '20 at 16:37
Conceded, the approach above won't work if the background is anything but a uniformly coloured field. – Rounin Jan 17 '20 at 16:38
Not only that, Say the *tougue shape* is a fixed element, some page content and text that is scrolled underneath will be affected (covered) by the white shape as well. – Roko C. Buljan Jan 17 '20 at 16:39
Absolutely. I'd be tempted to say that's pretty much the same background issue. – Rounin Jan 17 '20 at 16:41
1

Well, yes, just another similar case. But thanks for sharing and don't feel discouraged by my comments. – Roko C. Buljan Jan 17 '20 at 16:42
Strange no-one mentioned a simple SVG shape... ;) – Roko C. Buljan Jan 17 '20 at 16:44
2

Not at all, I appreciated your feedback. I started working on a solution several days ago when I saw the question after thinking it might be possible with 3 elements and 2 pseudo-elements. Then I got distracted and lost the tab. This afternoon I am tidying up tabs and came across it (I thought it was long closed). I couldn't bring myself to close the tab without finishing the solution - and I would be the first to agree that it's really not my best work. – Rounin Jan 17 '20 at 16:48
1

(* Because the question stipulates the solution must be a CSS solution). – Rounin Jan 17 '20 at 16:48
1

I can say SVG is tightly coupled with HTML (the first best thing), and doing it with SVG one would have better browser coverage than using the accepted `clip-path polygon` - [clip CanIUse](https://caniuse.com/#feat=css-clip-path) - [SVG CanIUse](https://caniuse.com/#feat=svg) – Roko C. Buljan Jan 17 '20 at 16:53
1

Actually not too late at all. I can practice with your solution, making some changes to fit in what i needed. i'm learning too :) – Amanda Natallie Jan 22 '20 at 19:27

Create a Shape ONLY with CSS

2 Answers2