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。

DEMO HERE

Answer 1

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

在这种情况下，可以使用linear-gradient背景的组合创建此效果，如下面的代码段所示。这里使用了三个linear-gradient的组合，它们如下：

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

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

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>

仅用于说明：

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

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）中并添加{{ 1}}到它。

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%);
}

Answer 2

Css span

使用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 clip-path

此解决方案使用剪辑路径创建角落截止。我添加了一个伪元素，它具有相同的高度和切口然后我在伪元素上使用了一个新的剪辑路径来创建折叠（不是矩形的默认形状）
此元素的背景颜色为黑色，并将其不透明度设置为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>

CSS折角效果透明背景

2 个答案:

Css span

Css clip-path