Creating a folded-corner effect in CSS with a clear background - here's how!

Question

Creating a folded-corner effect in CSS with a clear background - here's how!

Can anyone assist me? I am trying to change the folded-corner to be transparent instead of a solid color. Please refer to the image below for guidance.

https://i.sstatic.net/ZMrT8.png

I have attempted to modify these codes:

.back-ground
{
    background-image: url('http://pencil.my/assets/img/dashboard/bg.png');
    background-repeat: repeat;
    overflow-x: hidden;
}
.note {
    position: relative;
    width: 30px;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
    overflow: hidden;
    border-radius: 4px;
}

.note:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #658E15 #658E15;
    background: #658E15;
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

<div class="back-ground">
 <div class="note">
    Sample note
 </div>
</div>

html css

Answer 1

Answer №1

Although I may be a little late to answer this question, after conducting some research and exploring various solutions, I have found one that works well for me on a particular website.

    body {
      background-color: #234232
    }

    .box {
      width: 50%;
      height: 40%;
      margin: auto;
    }

    .fold-corner-card {
      margin: 2em;
      padding: 2em;
    }

    .fold-corner-card {
      background:
        -webkit-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -webkit-linear-gradient(45deg, #FFF, #FFF),
        -webkit-linear-gradient(135deg, #FFF, #FFF),
        -webkit-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -moz-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -moz-linear-gradient(45deg, #FFF, #FFF),
        -moz-linear-gradient(135deg, #FFF, #FFF),
        -moz-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -o-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -o-linear-gradient(45deg, #FFF, #FFF),
        -o-linear-gradient(135deg, #FFF, #FFF),
        -o-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        linear-gradient(45deg, #FFF, #FFF),
        linear-gradient(135deg, #FFF, #FFF),
        linear-gradient(225deg, transparent 25px, #FFF 10px);
    }

    .fold-corner-card {
      -webkit-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      -moz-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-position: 100% 0, 0 0, 100% 100%, 100% 0;
      background-repeat: no-repeat;
    }

<div class="box">
  <div class="fold-corner-card" style="position: relative;">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nisi dolor, at venenatis nisl viverra sed. Donec arcu felis, fermentum nec sapien vitae, gravida fringilla sapien. Nunc bibendum semper tristique. Curabitur non tempus augue. Vestibulum ut sapien lacus. Sed laoreet molestie est dignissim venenatis.</p>
  </div>
</div>

Answer 2

Although I may be a little late to answer this question, after conducting some research and exploring various solutions, I have found one that works well for me on a particular website.

    body {
      background-color: #234232
    }

    .box {
      width: 50%;
      height: 40%;
      margin: auto;
    }

    .fold-corner-card {
      margin: 2em;
      padding: 2em;
    }

    .fold-corner-card {
      background:
        -webkit-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -webkit-linear-gradient(45deg, #FFF, #FFF),
        -webkit-linear-gradient(135deg, #FFF, #FFF),
        -webkit-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -moz-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -moz-linear-gradient(45deg, #FFF, #FFF),
        -moz-linear-gradient(135deg, #FFF, #FFF),
        -moz-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -o-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -o-linear-gradient(45deg, #FFF, #FFF),
        -o-linear-gradient(135deg, #FFF, #FFF),
        -o-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        linear-gradient(45deg, #FFF, #FFF),
        linear-gradient(135deg, #FFF, #FFF),
        linear-gradient(225deg, transparent 25px, #FFF 10px);
    }

    .fold-corner-card {
      -webkit-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      -moz-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-position: 100% 0, 0 0, 100% 100%, 100% 0;
      background-repeat: no-repeat;
    }

<div class="box">
  <div class="fold-corner-card" style="position: relative;">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nisi dolor, at venenatis nisl viverra sed. Donec arcu felis, fermentum nec sapien vitae, gravida fringilla sapien. Nunc bibendum semper tristique. Curabitur non tempus augue. Vestibulum ut sapien lacus. Sed laoreet molestie est dignissim venenatis.</p>
  </div>
</div>

Answer 3

Answer №2

You could achieve a similar effect by creating a triangular shape using the CSS `::before` pseudo-element and the `border-color` trick. Rotate the triangle using the `transform` property and position it at the top of the page along with the `::after` element:

body {
  padding: 2em;
}

.paper {
  height: 100%;
  min-height: 400px;
  background: #fff;
  position: relative;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  display: block;
}

.paper::before {
  top: -59px;
  border: 30px white solid;
  border-top-color: transparent;
  border-left-color: transparent;
  right: 0;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(88deg);
  z-index: 2;
  border-radius: 0% 0% 10%;
}

.paper::after {
  background: white;
  position: absolute;
  height: 57px;
  width: calc(100% - 60px);
  top: -57px;
}

.paper .content {
  padding: 0 2.5em;
  position: relative;
  top: -1em;
  z-index: 1;
  margin-top: 50px;
}


/*This is for the diagonal strip pattern on the background only */

body {
  background-color: gray;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}

<div class="paper">
  <div class="content">
    This is the content of the paper
  </div>
</div>

Answer 4

You could achieve a similar effect by creating a triangular shape using the CSS `::before` pseudo-element and the `border-color` trick. Rotate the triangle using the `transform` property and position it at the top of the page along with the `::after` element:

body {
  padding: 2em;
}

.paper {
  height: 100%;
  min-height: 400px;
  background: #fff;
  position: relative;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  display: block;
}

.paper::before {
  top: -59px;
  border: 30px white solid;
  border-top-color: transparent;
  border-left-color: transparent;
  right: 0;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(88deg);
  z-index: 2;
  border-radius: 0% 0% 10%;
}

.paper::after {
  background: white;
  position: absolute;
  height: 57px;
  width: calc(100% - 60px);
  top: -57px;
}

.paper .content {
  padding: 0 2.5em;
  position: relative;
  top: -1em;
  z-index: 1;
  margin-top: 50px;
}


/*This is for the diagonal strip pattern on the background only */

body {
  background-color: gray;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}

<div class="paper">
  <div class="content">
    This is the content of the paper
  </div>
</div>

Creating a folded-corner effect in CSS with a clear background - here's how!

Answer №1

Answer №2

Similar questions

Struggling to make a basic JavaScript prompt function as expected

Adding a block between two other blocks on a mobile device using Bootstrap 4

The progress indicator fails to activate during the first step

Toggle Divs with jQuery (Rotate images depending on link)

js include exclude switch a category

Identifying CSS div tags in CakePHP with unique class names

Ensure Navbar elements remain on a single line

There is an issue with XMLHttpRequest loading http://*********. The requested resource does not have the necessary 'Access-Control-Allow-Origin' header

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

Mobile site experiencing owl.carousel responsiveness issues after refreshing the page

What could be the reason behind the malfunctioning of my media query in the

Determining the window height using jQuery when overflow is set to hidden

Ways to tackle my code's linked dropdown issue without the use of extensions

rendering google charts using jade template

Elevated CSS: Convert submenu to vertical dropdown layout rather than horizontal

New ways to style Links in NextJs 13

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?

Tips for including a verification symbol next to your username

Using Slick Slider and Bootstrap CSS to display text on top of images

What is the best way to modify the selection text background with CSS?