Question

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

有一张我想在不同层面上实现的目标。我的设计师几乎无处不在地使用它，我需要找到一种可靠而灵活的方法来实现它。 (click to see screenshot) transparent triangle

我将如何传统呢？

＆＃13;

.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:' ';
}

＆＃13;

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

＆＃13;

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

现在，我知道可能有一种使用面具的方法，但大多数时候它甚至在现代的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 Border不支持百分比，但你可以通过em单位和绝对定位来解决这个问题。你需要伪元素：after从左向右扩展，而：before伪元素在这里作为箭头。两个伪元素都从其父框溢出，这对于“透明度”起作用非常重要。

CSS＆gt;三角角透明面具

1 个答案: