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.

在这里演示

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)中并添加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>