侧面角标记（CSS）

Question

我有一个HTML页面，上面列有许多照片。我正在寻找一些关于如何使用CSS的帮助，以便一些照片有一个顶角“标记”，如红色条纹，这里称为“精选” -

http://www.logospire.com/logos/3922

我可以用谷歌搜索这是什么，但我不知道关键字。会喜欢任何提示和指示。

Answer 1

在您关联的页面上，它使用background-image解决，因此它只是一张图片。您可以使用Chrome Inspector / Firebug / IE Developer Tools / DragonFly /等来检查元素。

<强> HTML ：

<a id="featured" href="/?sort=featured"></a>

<强> CSS ：

#featured {
    display: block;
    width: 94px;
    height: 78px;
    background: url(/images/featured_bg.png) no-repeat;
    position: absolute;
    z-index: 10;
    top: -2px;
    left: -2px;
}

你也可以使用CSS3 Transforms（特别是Rotation）来实现这样的目标。

Answer 2

昨天我用css3读了一篇好文章。

http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

Answer 3

http://fusioncold.blogspot.co.uk/2011/06/text-rotate-with-css.html

您可以从该链接开始，如果您需要更多帮助，请点击其他关键字

Answer 4

您只需将主图像放在一个div中，该div位于相对位置且z-index为“1”。

然后你将小角落图像放在div中，并将其置于绝对顶部：0左：0，z-index表示“2”。

如果你想让它稍微偏离开箱即可，就像在示例中那样，使其左右定位略有负值。