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

时间:2018-03-28 15:03:27

标签: jquery html css transparency

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

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

enter image description here

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

1 个答案:

答案 0 :(得分:4)

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



#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);
}

<div id="myParentDiv">
  <div id="myDiv">
    My div
  </div>
</div>
&#13;
&#13;
&#13;

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

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

http://bennettfeely.com/clippy/

我希望这会对你有帮助。