css Question posted in
Some basic documentation can be found here.

How to make a receding flipped corner with CSS

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:

enter image description here

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

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

    Take a look at #7 and #8

    CSS-only ribbon shapes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search