另一种问这个问题的方法(如果你知道插画家/ photoshop)是否可以从父母那里减去一个孩子?
有没有办法使用jQuery或其他工具(因为我怀疑CSS足够强大)来做到这一点?
我的目标是将其用作"活动页面"指示符。因此,当关于活动页面(正在查看的页面)时,会有一个小的三角形指示符透明,所以您可以看到正文的背景。
答案 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;
在此处试试:https://jsfiddle.net/alexdant91/s4zxLqhr/3/
要设计新形状,您可以在此处使用超级简单且功能强大的工具:
http://bennettfeely.com/clippy/
我希望这会对你有帮助。