CSS folded corner effect transparent background

Question

I have this Code for folded corner using CSS:

body {
  background-color: #e1e1e1
}
.note {
  position: relative;
  width: 480px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}
.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  /* This trick side-steps a webkit bug */
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  /* A bit more verbose to work with .rounded too */
  background: #658E15;
  /* For when also applying a border-radius */
  display: block;
  width: 0;
  /* Only for Firefox 3.0 damage limitation */
  /* Optional: shadow */
  -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);
}
.note.red {
  background: #C93213;
}
.note.red:before {
  border-color: #fff #fff #97010A #97010A;
  background: #97010A;
}
.note.blue {
  background: #53A3B4;
}
.note.blue:before {
  border-color: #fff #fff transparent transparent;
  background: transparent;
}
.note.taupe {
  background: #999868;
}
.note.taupe:before {
  border-color: #fff #fff #BDBB8B #BDBB8B;
  background: #BDBB8B;
}

<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Now, in really action this worked but in top corner I see white background. how do remove white background and replace with transparent.

DEMO HERE

Harry · Accepted Answer

The only way transparency can be achieved (or mimicked) using the current approach would be to set border-color as the same as the page's background-color. This is because the code is using the border trick to create the folded effect. However, this approach is not very useful when the page background is an image or a gradient in itself (basically, not a solid color).

In such scenarios, this effect can be created using a combination of linear-gradient background like in the below snippet. Here, a combination of three linear-gradient are used and they are as follows:

One linear gradient (angled towards bottom left) to produce the folded effect. This gradient has a fixed 16px by 16px size. (Note: We can move this linear gradient to a pseudo-element like in the box-shadow version at the bottom of this answer but retaining it in the parent leaves one pseudo-element for some other use.)
One linear gradient to provide a solid color to the left of the triangle that causes the folded effect. We are using a gradient even though it produces a solid color because we can control the size of background only when images or gradients are used. This gradient is positioned at -16px on X-axis (basically meaning it would end before the place where the folded triangle is present).
Another gradient similar to the above which again produces a solid color but is positioned at 16px down on the Y-axis (again to leave out the area occupied by the folded triangle).

This is very complex but it can be responsive, can support multiple colors and non solid backgrounds also. To use different colors for the container or folded area, just modify the colors of the gradient. The first one forms the folded area and the rest forms the color of the container.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Just for demo */

.note {
  transition: all 1s;
}
.note:hover {
  width: 480px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Only for illustration:

In the below snippet, I have given each gradient a different color to illustrate how the whole effect is actually achieved.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: linear-gradient(to bottom left, transparent 50%, aqua 50%), linear-gradient(to right, chocolate 99.9%, transparent 99.9%), linear-gradient(to right, beige 99.9%, transparent 99.9%);
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Just for demo */

.note {
  transition: all 1s;
}
.note:hover {
  width: 480px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Multiple Themes:

Here is a version with sample for all themes (colors) that are provided in the question.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}

.note{
  background-image: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
}
.note.red{
  background-image: linear-gradient(to bottom left, transparent 50%, #97010A 50%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%);
}
.note.blue{
  background-image: linear-gradient(to bottom left, transparent 50%, #53A3E7 50%), linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%), linear-gradient(to right, #53A3B4   99.9%, transparent 99.9%);
}
.note.taupe{
  background-image: linear-gradient(to bottom left, transparent 50%, #BDBB8B 50%), linear-gradient(to right, #999868 99.9%, transparent 99.9%), linear-gradient(to right, #999868 99.9%, transparent 99.9%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note red">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note blue">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="note taupe">
  <p>Lorem ipsum dolor sit amet </p>
</div>

With box-shadow:

If box-shadow effect on the folded area is also required, we can move the first gradient (the one that creates the folded corner) into a separate pseudo-element (:before) and add box-shadow to it.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background-position: -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.note:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  top: 0px;
  right: 0px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.note:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #658E15 50%)
}
.note {
  background-image: linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
}
.note.red:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #97010A 50%)
}
.note.red {
  background-image: linear-gradient(to right, #C93213 99.9%, transparent 99.9%), linear-gradient(to right, #C93213 99.9%, transparent 99.9%);
}
.note.blue:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #53A3E7 50%)
}
.note.blue {
  background-image: linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%), linear-gradient(to right, #53A3B4 99.9%, transparent 99.9%);
}
.note.taupe:before {
  background-image: linear-gradient(to bottom left, transparent 50%, #BDBB8B 50%)
}
.note.taupe {
  background-image: linear-gradient(to right, #999868 99.9%, transparent 99.9%), linear-gradient(to right, #999868 99.9%, transparent 99.9%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note red">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note blue">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="note taupe">
  <p>Lorem ipsum dolor sit amet</p>
</div>

Persijn · Answer

Css span

Using an span (.fold) element i create a extra border to the right of the div.
Then i added pseudo classes to the .fold so that there is a darker blur on the corner element.

body {
  margin: 20px;
}
.fold {
  position: absolute;
  top: 15px;
  right: -15px;
  width: 15px;
  height: calc(100% - 15px);
  background-color: inherit;
}
.fold::before {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid firebrick;
}
.fold::after {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid black;
  opacity: 0.5;
}
.note {
  background-color: firebrick;
  padding: 25px;
  position: relative;
  width: 400px;
}

<div class="note">
  <span class="fold"></span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium
  ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi. In quis ipsum tellus. Proin in imperdiet felis.
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec tristique sollicitudin mi quis condimentum.
  In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet
  iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.
</div>

Css clip-path

This solution uses clip-path to create the corner cutoff. I added a pseudo element that is the same height and with as the cutout.
Then i used a new clip path on the pseudo element to create the fold (not a rectangle the default shape)
This element has a background color black, and set its opacity to 0.5 to get a darker color of the original background.

.note {
  width: 300px;
  padding: 10%;
  background-color: cornflowerblue;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  -moz-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  -ms-clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%);
  position: relative;
}
.note::before {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  -webkit-clip-path: polygon(0,0 100% 100%, 0 100%);
  -moz-clip-path: polygon(0,0 100% 100%, 0 100%);
  -ms-clip-path: polygon(0,0 100% 100%, 0 100%);
  clip-path: polygon(0,0 100% 100%, 0 100%);
  background-color: black;
  opacity: 0.5;
  right: 0;
  top: 0;
}

<div class="note">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi.

In quis ipsum tellus. Proin in imperdiet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec tristique sollicitudin mi quis condimentum. In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.
</div>

CSS folded corner effect transparent background

Tags:

html

jquery

css

css-shapes

ಠ_ಠ

2 Answers

Harry

Css span

Css clip-path

Persijn

Recent Activity

Donate For Us

CSS folded corner effect transparent background

Tags:

html

jquery

css

css-shapes

ಠ_ಠ

2 Answers

Harry

Css span

Css clip-path

Persijn

Related questions

Recent Activity

Donate For Us