CSS折叠的角落作用透明背景 [英] CSS folded corner effect transparent background

问题描述

我有使用CSS的折叠角的代码：

  body {background-color：＃e1e1e1} .note {position：relative; width：480px; padding：1em 1.5em; margin：2em auto; color：#fff;背景：＃97C02F; overflow：hidden;}。注意：before {content：; position：absolute; top：0; right：0; border-width：0 16px 16px 0; / *这个窍门侧面的webkit bug * / border-style：solid; border-color：#fff #fff＃658E15＃658E15; / *有点更冗长的工作与.rounded太* /背景：＃658E15; / *当同时应用border-radius * / display：block时; width：0; / *仅适用于Firefox 3.0损坏限制* / / *可选：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;背景：＃BDBB8B;}  

 < div class = note> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / p>< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / p>< / div>  

现在，在真正的行动这工作，但在顶部角落，我看到白色背景。如何删除白色背景并替换为 transparent 。

DEMO 这里

解决方案

透明度可以通过使用current方法是将 border-color 设置为与页面的 background-color 相同。这是因为代码使用边框技巧创建折叠效果。然而，当页面背景是图像或本身的渐变（基本上不是纯色）时，此方法不是非常有用。

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

• 一个线性渐变（向左下方倾斜）以产生折叠效果。此渐变具有固定的16px x 16px大小。 （注意：我们可以将此线性渐变移动到伪元素，如在此答案底部的 box-shadow 版本，在父项中为一些其他用途留下一个伪元素。）


• 一个线性渐变，在三角形的左侧提供导致折叠效果的纯色。我们使用一个渐变，即使它产生一个纯色，因为我们可以控制背景的大小，只有当使用图像或渐变。此梯度在X轴上位于-16px（基本上意味着它将在折叠三角形存在的地方之前结束）。


• 与上述类似的另一个梯度再次产生一个实体颜色，但在Y轴上的位置为16像素（再次省略折叠三角形占据的区域）。

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

  body {background-image： ＃3F9CBA 0％，＃153346 100％）;}。note {position：relative; width：320px; padding：1em 1.5em; margin：2em auto; color：#fff;背景：线性梯度（至左下，透明50％，＃658E15 50％），线性梯度（至右，＃97CO2F 99.9％，透明99.9％），线性梯度（至右，＃97CO2F 99.9％ 99.9％）; background-size：16px 16px，100％100％，100％100％; background-position：100％0％，-16px 0％，100％16px;背景重复：无重复; overflow：hidden;} / *只是为演示* /。note {transition：all 1s;}注意：hover {width：480px;}  snippet-code-html lang-html prettyprint-override> < 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。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / p>< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / p>< / div>  

---

仅供参考：

在下面的代码段中，强>给每个渐变不同的颜色来说明如何实现整个效果。

  body {background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;} .note {position：rel; width：320px; padding：1em 1.5em; margin：2em auto; color：#fff;背景：线性梯度（至左下，透明50％，水50％），线性梯度（右，巧克力99.9％，透明99.9％ ; background-size：16px 16px，100％100％，100％100％; background-position：100％0％，-16px 0％，100％16px;背景重复：无重复; overflow：hidden;} / *只是为演示* /。note {transition：all 1s;}注意：hover {width：480px;}  snippet-code-html lang-html prettyprint-override> < 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。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / p>< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。毛里求斯山cus，l is is is。 Duis vel sem magna。前哨鱼尾灯。 < / 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-image：线性梯度（到左下，透明50％，＃658E15 50％），线性梯度（到右，＃97C02F 99.9％，透明99.9％），线性梯度（到右，＃97C02F 99.9％，透明99.9％）;} note.red {background-image：线性梯度（到左下，透明50％，＃97010A 50％ C93213 99.9％，透明99.9％），线性梯度（右，＃C93213 99.9％，透明99.9％）; note.blue {背景图像：线性梯度（到左下，透明50％，＃53A3E7 50％），线性梯度（右，＃53A3B4 99.9％，透明99.9％），线性梯度（右，＃53A3B4 99.9％，透明99.9％）;梯度（至左下，透明50％，＃BDBB8B 50％），线性梯度（至右，＃999868 99.9％，透明99.9％），线性梯度（至右，＃999868 99.9％，透明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 效果，我们可以将第一个渐变（创建折叠角的渐变）移动到单独的伪元素（：之前），并向其添加 box-shadow 。

  body {background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;}。 width：320px; padding：1em 1.5em; margin：2em auto; color：#fff; background-position：-16px 0％，100％16px;背景重复：无重复; overflow：hidden;}。注意：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）;}注意：before {background-image：linear- ，透明的50％，＃658E15 50％）。注意{背景图像：线性梯度（右，＃97CO2F 99.9％，透明99.9％），线性梯度（右，＃97CO2F 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％，透明99.9％），线性梯度（右，＃C93213 99.9％，透明99.9％）;}。note.blue:before {background-image：linear-gradient（to bottom left，transparent 50％ （右，＃53A3B4 99.9％，透明99.9％），线性梯度（右，＃53A3B4 99.9％，透明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％ 99.9％），线性渐变（向右，＃999868 99.9％，透明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>  

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

解决方案

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>

这篇关于CSS折叠的角落作用透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！