Creating a custom shape with border-radius

Question

I want to create a shape like this:

It should fit into the screen and it should be cut on the left hand side.

How can i do this?

What i have now is this:

    .shape {
      height: 92vw;
      width: 100vw;
      background-color: red;
      position: absolute;
      bottom: 0px;
      border-radius: 92vw 0px 0px 0px;
    }

<div class="shape"></div>

Depends what you want to do, you can change colours etc inline — Andy Holmes
– Andy Holmes, Commented Jul 14, 2016 at 8:07
@olivier Yes, SVG can be styled with CSS as any other XML or HTML document. — feeela
– feeela, Commented Jul 14, 2016 at 8:10
Thanks a lot Andy and feeela i was already able to do it. =) — olivier
– olivier, Commented Jul 14, 2016 at 8:13

Asons · Accepted Answer · 2016-07-14 08:43:15Z

2

You can use a pseudo element

html, body {
  margin: 0;
}
.shape {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}
.shape:before {
  content: '';
  height: 250vh;
  width: 250vw;
  background-color: #ecdbb0;
  position: absolute;
  top: 20px;
  left: -20vw;
  border-radius: 50%;
}

<div class="shape"></div>

edited Jul 14, 2016 at 8:43

answered Jul 14, 2016 at 8:35

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

Comments

Asons · Accepted Answer · 2016-07-14 08:39:07Z

2

I solved it with a SVG.

Thanks andy and feeela!

html, body {
  margin: 0;
}
#shape {
  position: absolute;
  bottom: 0px;
}

<svg id="shape" data-name="Form crop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 928.08"><defs><style>.cls-1{fill:#ecdbb0;opacity:0.6;}</style></defs><title>shape</title><path class="cls-1" d="M2379.69,1551.29V623.21c-603.05,53.25-876.26,317.23-999.59,558.26l-0.41.8v369h1000Z" transform="translate(-1379.69 -623.21)"/></svg>

edited Jul 14, 2016 at 8:39

Asons

87.7k12 gold badges119 silver badges175 bronze badges

answered Jul 14, 2016 at 8:16

olivier

2,6456 gold badges37 silver badges61 bronze badges

3 Comments

Andy Holmes Over a year ago

No problem :) Glad to be of help :)

Marcos Pérez Gude Over a year ago

In this example it doesn't work. Answer provided for LGSon is better I guess.

Asons Over a year ago

You can make it work with your SVG on all platforms, though with my suggested solution you get easier maintenance and full control of all part of the shape using standard CSS ... and no extra markup :)

Collectives™ on Stack Overflow

Creating a custom shape with border-radius

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related