Creating shape with CSS

Question

Trying to create this shape with css

I've managed to get to this result

but can't figure out how to create the arc in the bottom part of the rectangle this is my css

.left-page {             
         color: hsl(35, 35, 35);
         border-top-left-radius:  26px;
         border-bottom-left-radius:  26px;
         border: solid 1px hsl(274,65,35);
         
    }

would it be easier to just use an image and set it as the background? if not, one thing you can do is add a ::before or ::after selector (or actual element) that's position absolute, and round it, but that's gonna be a real headache — Abdul Ahmad
– Abdul Ahmad, Commented Apr 16, 2021 at 20:22

Abdul Ahmad · Accepted Answer · 2021-04-16 20:29:26Z

0

you can try something like this but i dont think this is a great idea:

.shape {
  width: 400px;
  height: 400px;
  background: red;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  position: relative;
 
}

.shape::after {
  content: '';
  background: red;
  width: calc(100% - 15px);
  height: 40px;
  position: absolute;
  bottom: -17px;
  right: 0;
  border-radius: 50%;
}

<div class='shape'>

</div>

answered Apr 16, 2021 at 20:29

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

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

Comments

Nora · Accepted Answer · 2021-04-16 20:31:26Z

0

You can use a bottom 'footer' (or after pseudo element) to illustrate the effect you're looking for.

.content {
  width: 200px;
  height: 300px;
  
  border: 1px solid purple;
  border-bottom: none;
  
  border-top-left-radius: 32px;
}

.bottom {
  width: 200px;
  height: 50px;
  
  border-bottom: 1px solid purple;
  border-left: 1px solid purple;
  border-right: 1px solid purple;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="container">
  <div class="content">
  
  </div>
  <div class="bottom"></div>
</div>

answered Apr 16, 2021 at 20:31

Nora

6504 silver badges11 bronze badges

Collectives™ on Stack Overflow

Creating shape with CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related