CODEWITHSUNDEEP
htmlcss
Vinesh EG
Vinesh EG

Reputation: 1365

CSS curved shapes

What is the best solution to create a layout like below enter image description here

with the gap between two elements (white gap between red and green) with equal space

Upvotes: 0

Views: 114

Answers (2)

Temani Afif
Temani Afif

Reputation: 273969

A simple radial-gradient will do it:

.box {
  height:100px;
  background:radial-gradient(circle at left, 
    green 20%,transparent 20%,transparent calc(20% + 5px),red calc(20% + 5px))
}
<div class="box">

</div>

To have the perfect half circle you may consider multiple background like this:

.box {
  height:100px;
  background:
   radial-gradient(circle at left,green 50%,transparent 50%, transparent calc(50% + 5px),red calc(50% + 5px)) 20px 0/88px 100px,
   linear-gradient(green,green)left/20px 100%,
   linear-gradient(red,red)right/calc(100% - 20px - 85px) 100%;
  background-repeat:no-repeat;
}
<div class="box">

</div>

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

You can create this by using HTML and CSS like below or go through JSFiddle

    .banner-div {
      height: 100px;
      width: 320px;
      display: flex;
      background-color: #377d22;
    }
    
    .red-div {
      width: 30%;
      background-color: #eb3223;
      height: 100%;
      border: 2px solid #fff;
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    
    .other-div {
      width: 70%;
      height: 100%;
    }
    <div class="banner-div">
      <div class="red-div">
      </div>
      <div class="other-div"></div>
    </div>

Upvotes: 4

Related Questions