css - 侧 Angular 标记 (CSS)

Question

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

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 )来实现这样的目标。