css - 侧 Angular 标记 (CSS)

Question

我有一个 HTML 页面，上面列出了许多照片。我正在寻找一些有关如何执行 CSS 的帮助，以便某些照片具有顶 Angular “标记”，例如此处称为“精选”的红色条纹 -

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

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

Answer 1

在您链接的页面上，它是通过背景图像解决的，因此它只是一个图像。您可以使用 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 )来实现这样的目标。