How to make a receding flipped corner with CSS

Question

This is what I am trying to build, an orange column that is sitting higher than the purple row with an inward flipped left corner:

I am probably not using the correct terminology to do my research, hopefully the screenshot is describing what I am trying to do. Any pointers or links would be highly appreciated.

The example I have put together is really not close to what it should be.

body {
  background: #272822;
}

.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
  /* Optional Gradient */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* IE10+ */
  background: linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
}

.page h2 {
  padding: 85px 0 0 20px;
  font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}

.page p {
  padding: 10px 20px;
  font: 12px/1.5 Helvetica, sans-serif;
  color: #4b4b4b;
}

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

.foldtl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
}

.foldtl:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822;
  border-right: 69px solid transparent;
}

<div class="page foldtl">
  <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Your demo looks nothing like your supplied image. Please clarify what effect you are trying to achieve. — Paulie_D
– Paulie_D, Commented Jul 25, 2024 at 18:38
@Paulie_D To be fair OP says in the question that the demo code so far is nothing like what it's supposed to be. I am guessing the folder corner in the demo is supposed to be folded in the "other direction" (like the goal image displays) — TylerH
– TylerH, Commented Jul 25, 2024 at 18:49
@ hnnnng -- is it correct to say you want to make an element that appears to be "hanging" from the top of the white area, with the top of the element disappearing "into" the purple area? — TylerH
– TylerH, Commented Jul 25, 2024 at 18:50
@TylerH the question title is updated, now it is describing exactly what i am looking for and yes, the orange column should be hanging from the top of the white (body) area. — hnnnng
– hnnnng, Commented Jul 26, 2024 at 13:09

poke · Accepted Answer · 2024-07-25 18:49:44Z

6

You can use different borders to create diagonal lines.

.wrapper {
  background: #9a99ff;
  width: 500px;
  height: 200px;
  padding: 10px;
}

.page {
  background: white;
  height: 100px;
  margin-top: 40px;
  position: relative;
}

.ribbon {
  position: absolute;
  background: #fcb712;
  width: 150px;
  height: calc(100% + 20px);
  left: 50px;
  top: -20px;
}

.ribbon::before {
  content: '';
  display: block;
  background: transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 0px;
  left: -20px;
  border-top: 20px solid transparent;
  border-right: 20px solid #ea9243;
}

<div class="wrapper">
  <div class="page">
    <div class="ribbon"></div>
  </div>
</div>

answered Jul 25, 2024 at 18:49

poke

392k80 gold badges596 silver badges632 bronze badges

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

1 Comment

Travis J Over a year ago

.wrapper{ border: 3px solid black; border-right: 6px solid black; border-bottom: none; } and body { background-color: #c8c8c8; }? Just for fun :P Then it looks 100% like the image

Temani Afif · Accepted Answer · 2024-07-25 23:07:55Z

3

I have an online generator for all those shapes: https://css-generators.com/ribbon-shapes/

Take a look at #7 and #8

answered Jul 25, 2024 at 23:07

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

1 Comment

hnnnng Over a year ago

Oh wow, this is an awesome tool, i am sure i'll be using it a lot. i accepted @poke's solution for the effort but i will try and compare the code your online generator is outputting as well. thank you!

Collectives™ on Stack Overflow

How to make a receding flipped corner with CSS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related