CSS > 三角角透明蒙版

Question

好的，有一个有点棘手的问题。 我已经知道并经常使用 CSS 三角形来实现不同的布局，但这次三角形应该有点像面具。它必须有透明的一半，并且绝对需要掩盖父背景颜色。

有一张我不想在不同级别上实现的图片。我的设计师几乎在所有地方都使用了它，我需要找到一种可靠但灵活的方法来做到这一点。 (click to see screenshot) transparent triangle

我会按照传统方式这样做

.box{
  position:relative;display:block;
  width:280px;height:140px;
  background-color:#000;
  padding:15px 15px;
}

.box.angled:after{
  border-color:#000000 #ffffff transparent transparent;
  border-width:50px 50px 0 0;
  border-style:solid;
  
  position:absolute;display:block;
  width:0;height:0;
  right:0;bottom:0;
  content:' ';
}

<div class="box angled">
  blah blah blah
</div>

是的，工作正常吗？嗯，没有。将白色边框颜色更改为透明，现在您只能看到其父黑色背景颜色。

现在，我知道可能有一种使用蒙版的方法，但大多数情况下即使在现代 Firefox 42+ 或 Internet Explorer 10 上也不能很好地兼容。

正如我所说，在许多不同的情况下（平面背景、图像背景、可变父宽度/高度......）是否有任何灵活可靠的方法来做到这一点

2016-07-13 编辑：如果有人有同样的问题，找到解决方案，请在下面查看我的答案。

Answer 1

这就是我解决问题的方法。对于需要透明边框的情况，我已经能够找到正确的解决方案，并且我仍然可以将基本解决方案用于仅需要纯色的任何其他情况，这对我来说很好。

所以我在寻找解决方案的过程中迷上了这个演示。

div {
  width: 20%;
  min-width: 13em;
  margin: 1em auto;
}
p {
  font-family: helvetica;
  font-size: 2em;
  font-weight: bold;
}

.post-it-note {
   padding: 2em;
   background: #ffd707;
   position: relative;
   min-height: 10em;
}
.post-it-note:after {
   content: "";
   position: absolute;
   bottom: -2em;
   left: 0;
   right: 2em;
   border-width: 1em;
   border-style: solid;
   border-color: #ffd707;
}
.post-it-note:before {
   content: "";
   position: absolute;
   bottom: -2em;
   right: 0;
   border-width: 2em 2em 0 0;
   border-style: solid;
   border-color: #d3b100 transparent transparent;
}

<div class="post-it-note">
  <p>This folded corner works on any colored background!</p>
</div>

https://codepen.io/jontroutman/pen/ihkvL/

演示是不言自明的，但让我解释一下。 CSS 边框不支持百分比，但您可以通过 em 单位和绝对定位在一定程度上克服这个问题。您需要伪元素 :after 从左向右扩展，并且 :before 伪元素在这里充当箭头。两个伪元素都从它们的父框溢出，这对于“透明度”的工作很重要。