-2

I have tried my best to use clipPath editors but not able to achieve a shape like this one. Any help ?

enter image description here

Prémices K
  • 65
  • 2
  • 6

2 Answers2

2

.dshape {
  /* to ensure the starting shape is a square,
     with the inline and block sizing in a
     ratio of 1 to 1: */
  aspect-ratio: 1;
  /* in Latin (left-to-right) languages this
     is equivalent to 'width' ('block-size'
     would be the equivalent of 'height'): */
  inline-size: 10em;
  background-color: red;
  /* using a circular clip path of 80% of
     the element's size, with the clipping
     circle centred at 50% on the inline
     axis, and zero on the block-axis: */
  clip-path: circle(80% at 50% 0);
}
<div class="dshape"></div>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

is this what you want?

creating a div with 200px/200px Adding border-radius bottom right and bottom left border-radius: 0 0 100% 100%;

.dshape {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 0 0 100% 100%;
}
<div class="dshape"></div>
UmairFarooq
  • 1,269
  • 1
  • 3
  • 8
  • using border-radius can only make it look either to the left or right, but not to the bottom, which is what I want. I thought clip-path was the solution @UmairFarooq – Prémices K Oct 12 '22 at 11:07
  • no you can make it to bottom as well.i will change the answer check now – UmairFarooq Oct 12 '22 at 11:08
  • you just have to change where to add border-raduis.`border-radius: 0 0 100% 100%;` 0 top-left, 0 top-right,100% bottom-right,100% bottom-left. shortcut works as clockwise – UmairFarooq Oct 12 '22 at 11:11
  • Damn that actually worked I never considered that. Thanks @UmairFarooq. – Prémices K Oct 12 '22 at 11:12
  • It's close to the one I wanted. It's rather perfectly rounded on the points of contact between the circle and the rectangle. So I'll go with the answer below but thanks for the help though – Prémices K Oct 12 '22 at 11:16
  • sure its okay.. – UmairFarooq Oct 12 '22 at 11:21