CSS折角效果透明背景

Question

我有这个使用 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>

现在，这确实有效，但在顶角我看到white 背景。如何删除白色背景并替换为transparent。

演示HERE

Answer 1

使用当前方法实现（或模仿）透明度的唯一方法是将border-color 设置为与页面的background-color 相同。这是因为代码使用边框技巧来创建折叠效果。但是，当页面背景本身是图像或渐变（基本上不是纯色）时，这种方法并不是很有用。

在这种情况下，可以使用linear-gradient 背景的组合来创建此效果，如下面的 sn-p 所示。这里使用了三个linear-gradient的组合，分别如下：

• 一个线性渐变（朝向左下角）产生折叠效果。此渐变具有固定的 16 像素 x 16 像素大小。 （注意：我们可以将这个线性渐变移动到一个伪元素，就像这个答案底部的box-shadow 版本一样，但将它保留在父元素中会留下一个伪元素用于其他用途。 )
• 一个线性渐变，用于在三角形左侧提供纯色，从而导致折叠效果。我们正在使用渐变，即使它会产生纯色，因为我们只能在使用图像或渐变时控制背景的大小。此渐变位于 X 轴上的 -16px 处（基本上意味着它将在折叠三角形所在的位置之前结束）。
• 另一个与上述类似的渐变，再次产生纯色，但位于 Y 轴下方 16 像素处（同样省略了折叠三角形占据的区域）。

这是非常复杂的，但它可以响应，也可以支持多种颜色和非纯色背景。要为容器或折叠区域使用不同的颜色，只需修改渐变的颜色即可。第一个形成折叠区域，其余形成容器的颜色。

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>

---

仅作说明：

在下面的 sn-p 中，我给每个渐变一个不同的颜色来说明整个效果是如何实际实现的。

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>

---

多个主题：

这是一个版本，其中包含问题中提供的所有主题（颜色）的示例。

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>

---

与 box-shadow:

如果还需要box-shadow 对折叠区域的影响，我们可以将第一个渐变（创建折叠角的那个）移动到一个单独的伪元素（:before）中并添加box-shadow。

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>

Answer 2

CSS 跨度

使用 span (.fold) 元素，我在 div 的右侧创建了一个额外的边框。
然后我在.fold 中添加了伪类，这样角元素上就会出现更暗的模糊。

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 剪辑路径

此解决方案使用剪辑路径来创建切角。 我添加了一个高度相同的伪元素，并且与切口相同。
然后我在伪元素上使用了一个新的剪辑路径来创建折叠（默认形状不是矩形）
此元素的背景颜色为黑色，并将其不透明度设置为 0.5 以获得比原始背景更暗的颜色。

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