使用CSS折叠/包装效果

Question

你如何为this website做折叠/包装效果？......是否有技术术语？

我知道我可以很容易地去查看来源查看CSS，但我无法弄清楚小折叠部分的哪个部分（我用橙色圈出来）。 或者，如果我知道技术术语，我可以查一查。

Answer 1

如果您在Chrome中检查该页面，您会看到它使用以下适用于横幅本身的CSS选择器：

#slider .slider .slide .box.top-right:before {
    border-right: 9px solid transparent;
    border-top: 6px solid #303030;
    bottom: -6px;
    right: 0;
}

#slider .slider .slide .box:before {
    content: '';
    height: 0;
    position: absolute;
    width: 0;
}

所以基本上它在横幅的div之前说＆＃34;把一个带有空白内容的伪元素放在绝对位置＆＃34;。然后，顶部选择器更具体，说要将它放在右下角，并使用特殊的边框技巧给出小三角形。

编辑：人们有时称这种技巧为＃34; CSS三角形＆＃34;。