透明的孩子在非透明的父母里面

Question

另一种问这个问题的方法（如果你知道插画家/ photoshop）是否可以从父母那里减去一个孩子？

有没有办法使用jQuery或其他工具（因为我怀疑CSS足够强大）来做到这一点？

我的目标是将其用作＆＃34;活动页面＆＃34;指示符。因此，当关于活动页面（正在查看的页面）时，会有一个小的三角形指示符透明，所以您可以看到正文的背景。

Answer 1

您无法从子元素获得透明背景，但您可以使用css设计特定形状。通过这种方式，您可以显示所需的背景。试试这个例子：

＆＃13;

＆＃13;

#myParentDiv {
  height: 200px;
  width: 100%;
  background: blue;
  padding: 5px;
}

#myDiv {
  height: 100px;
  width: 100px;
  background: red;
  padding: 5px;
  -webkit-clip-path: polygon(100% 0, 100% 60%, 53% 60%, 53% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 60%, 53% 60%, 53% 100%, 0 100%, 0 0);
}

＆＃13;

<div id="myParentDiv">
  <div id="myDiv">
    My div
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在此处试试：https://jsfiddle.net/alexdant91/s4zxLqhr/3/

要设计新形状，您可以在此处使用超级简单且功能强大的工具：

http://bennettfeely.com/clippy/

我希望这会对你有帮助。