使用CSS折叠/包装效果

时间:2014-03-24 19:14:30

标签: css css3 sass

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

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

enter image description here

1 个答案:

答案 0 :(得分: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; CSS三角形"。