CODEWITHSUNDEEP
htmlcss
mathieu459
mathieu459

Reputation: 11

How to create curve and circle in css and html5?

I'm new to the css world and I'm trying to make a responsive design like this using bootstrap, css and html5

for more information here is an illustration:

enter image description here

curve how to create the same curve and a circle above? i really need help i try everything but it doesn't work a little help will be really good

Upvotes: 0

Views: 153

Answers (2)

Temani Afif
Temani Afif

Reputation: 272995

You can use radial-gradient combined with mask:

.box {
  height:300px;
  max-width:1024px;
  margin:auto;
  border:1px solid red;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle 1800px at 50% -840px,transparent 53.8%,red 54% 60.8%,transparent 61%);
  -webkit-mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
          mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
}


body {
  background:url(https://i.picsum.photos/id/1000/800/800.jpg) center/cover;
}
<div class="box"><div>

Upvotes: 0

ROOT
ROOT

Reputation: 11622

You have two options, the better is to use SVG (I would go for this one if its me), also you can implement something like you provided in HTML but not every shape is possible to have using HTML, if curve and circles all you need then, something like can be implemented:

.main {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background: red;
  padding: 50px;
  position:absolute;
  top:-240px;
}

.inner {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background: white;
}

.innerWhite {
  border: 1px solid 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;
  position: absolute;
  bottom: 45px;
}
<div class="main">
  <div class="inner">
    <div class="innerWhite"></div>
  </div>
</div>

Upvotes: 2

Related Questions