如何制作带透明背景的CSS折角效果？

Question

有人可以帮我吗？我需要将折角的颜色变成透明而不是实色。您可以参考下面的图片。

我已经尝试了以下代码：

.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>

- Nere

---

这不完全相同（因此不会关闭），但它可能会对您有所帮助- https://dev59.com/wVwY5IYBdhLWcg3wHkqK#32996982 - Harry

Answer 1

我回答这个问题有些晚了，但经过一些搜索并找到了几个解决方案，我最终在一个网站上使用了以下内容。

    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>

- David Lilue

Answer 2

可能有类似这样的解决方案。基本上只需使用 ::before 三角形和 border-color 技巧，使用 transform 旋转它，并将其与 ::after 元素一起定位在页面顶部：

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>

- symlink