CODEWITHSUNDEEP
javascripthtmlcsscanvas
Diptox
Diptox

Reputation: 1809

CSS How to generate this Shape on a Div or on Canvas

i have been trying for like 3 hours to make this shape enter image description here

on a div using css

Canvas drawing is accepted , but Css is prefered

Thanks guys :D

Another Solution

if any one is looking for the Canvas solution or the non-solid background here is it https://jsfiddle.net/roonie007/hemjfonx/1/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var curveStrength = 50 ;


context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(canvas.width/2, curveStrength, canvas.width, 0);
context.lineTo(canvas.width,canvas.height);
context.lineTo(0,canvas.height);
context.lineTo(0,0);

context.fillStyle = "black";
context.fill();

Upvotes: 1

Views: 255

Answers (1)

jayms
jayms

Reputation: 4018

It would be useful to know what kind of shape that is. I am cutting an ellipse in half for my solution.

This was kind of fun.

Edit: Changed my code a little bit to look crisper.

#box {
  width:300px;
  height:50px;
  background:black;
  overflow:hidden;
}

#box::before{
  content:'';
  display:block;
  width:300px;
  height:30px;
  background:white;
  border-radius:0 0 50% 50%;
  position:relative;
  top:-15px;
}
<div id="box">
</div>

Upvotes: 3

Related Questions