2

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

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

在此处输入图像描述

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

4

4 回答 4

3

在您链接的页面上，它是用 解决的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 变换（特别是Rotation）来实现类似的效果。

于 2012-07-25T12:58:49.127 回答
2

我昨天使用 css3 阅读的好文章。

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

于 2012-07-25T13:13:29.913 回答
1

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

您可以从该链接开始，如果您需要更多帮助，请搜索更多关键字

于 2012-07-25T12:58:38.757 回答
1

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

然后你也将小角图像放在 div 中，并使其绝对位置，top:0 left:0 和 z-index 为“2”。

如果您希望它像示例中那样稍微开箱即用，请使其左侧和顶部定位稍微负值。

于 2012-07-25T13:02:37.240 回答