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
– Terry, Commented Dec 30, 2019 at 20:38
Because this is a challenge for a job... i can't use images, only css to draw everything — Amanda Natallie
– Amanda Natallie, Commented Dec 30, 2019 at 20:42
+1 for a tough question. It's bugging me that I can't get there, but this question and the JSFiddle linked in it might point you in the right direction. There are also some answers that are somewhat close to what you're looking for.. — mtr.web
– mtr.web, Commented Dec 30, 2019 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
– Amanda Natallie, Commented Dec 30, 2019 at 21:23
You could try three ovals 1. white (left) 2. blue (center) 3. white (right) css-tricks.com/the-shapes-of-css and work on overlapping them to create the effect. Not perfect, but might work. — Nathaniel Flick
– Nathaniel Flick, Commented Dec 30, 2019 at 21:25

MikhaD · Accepted Answer · 2020-01-17 19:26:17Z

2

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>

edited Jan 17, 2020 at 19:26

answered Jan 10, 2020 at 13:37

MikhaD

1371 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amanda Natallie Over a year ago

This definitely fits. Thank you very much.

Rounin · Accepted Answer · 2020-01-18 18:54:00Z

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, 2020 at 18:54

answered Jan 17, 2020 at 16:26

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

10 Comments

Roko C. Buljan Over a year ago

Well, yes, just another similar case. But thanks for sharing and don't feel discouraged by my comments.

Rounin Over a year ago

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 Over a year ago

(* Because the question stipulates the solution must be a CSS solution).

Roko C. Buljan Over a year ago

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 - SVG CanIUse

Amanda Natallie Over a year ago

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 :)

|

Collectives™ on Stack Overflow

Create a Shape ONLY with CSS

2 Answers 2

1 Comment

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related