0

So I'm trying to practice my CSS skills on advanced areas of CSS and I must say, I've become absolutely stumped in recreating a DIV with the following design:

So essentially I want the div to have an "abnormal polygon shape/border" but I have no clue how I would go about doing that (plus a box shadow too). I believe you could use clip-path maybe? But I'm not 100% sure..

EDIT: to be clearer, I’m trying to find a solution which allows for: responsiveness, border-radius around the abnormal shape a box-shadow too, which is more complex than some of the other questions,

zuc0001
  • 924
  • 4
  • 12
  • 27
  • Somewhat, but not entirely. I already knew about the trick of clip-path, but it doesn't solve my solution of using box-shadow. Clip-path cuts off anything outside of the path, including the shadows. – zuc0001 Oct 29 '19 at 12:02
  • read all the answers, there not only a clip-path idea – Temani Afif Oct 29 '19 at 12:02
  • Hmm I see. One uses perspectives to create the effect. I might give that a shot. I think this might be a bit tricky to make the div responsive. – zuc0001 Oct 29 '19 at 12:08
  • Actually also on that topic, this technique might not work too well with border radiuses, as per the image I posted. So essentially, I'm trying to think of a way which provides box shadows, border radius, the abnormal shape and responsiveness. – zuc0001 Oct 29 '19 at 12:10
  • you said *but rather just looking for tips* --> I gave you more that a tips so you can probably to a small effort to give a try with what I gave you? as a side note you question is off topic – Temani Afif Oct 29 '19 at 12:17
  • Yes I understand and thank you for the help, but it’s part of the question I’m trying to find an answer to :) I have edited the question now to make it a bit more clearer – zuc0001 Oct 29 '19 at 12:18

1 Answers1

1

One of the kaywords You're looking for -> SVG, Clip-path

Take a look here -> How to make area be irregular shape not rectangle? or here -> https://css-tricks.com/creating-non-rectangular-headers/

AdamKniec
  • 1,607
  • 9
  • 25