所有角落都有伪类的CSS精灵

Question

我发现this codepen正在使用此精灵来添加角落：

使用此代码：

junk.c:10:33: warning: implicitly declaring library function 'strerror' with type 'char *(int)'
        fprintf(stderr, "%s\n", strerror(errno));
                                ^
junk.c:10:33: note: include the header <string.h> or explicitly provide a declaration for 'strerror'
1 warning generated.

但是在codepen示例中只使用了顶角，我怎样才能将底角添加到一个简单的div？我尝试了一些重复div之类的事情：部分之后却没有效果。我认为这很简单，但我不明白这一点。

提前致谢

Answer 1

您可以复制该div <NodeEditorWidget>: GridLayout: size: root.size cols: 3 Label: text: 'Test 1' NodeWidget: ... Label: text: 'Test 3' 并垂直翻转底部的.lol-promo和transform:scale将它们放置在页面的右下角和左下角。这是一个带有完整代码的小提琴https://jsfiddle.net/az6juLkq/1/。

absolute

Answer 2

您可以使用CSS3 border-image property。

您可以定义图像的切片方式和边框宽度。 The slice rule取四个值，分别定义框的顶角，右角，底角和左角。这样，您就不需要任何伪元素。

提供您的标记：<section class="lol-promo"></section> ..

您只需要这个CSS：

.lol-promo {
    ...
    border-image: url('//s.cdpn.io/800/ornaments-sprite.png');
    border-image-slice: 40 96 40 96;
    border-image-width: auto;
}

slice基于您在问题中引用的图片。对于任何其他图像，您需要根据边框的显示方式调整这些值。

示例代码段：

.lol-promo {
    height: 120px; width: 320px; margin: 16px; padding: 16px;
    background-color: rgba(0,0,128,0.1);
    border-image: url('//s.cdpn.io/800/ornaments-sprite.png');
    border-image-slice: 40 96 40 96;
    border-image-width: auto;
}

<section class="lol-promo">
    <h2>header</h2>
    <p>Lorem ipsum</p>
</section>

示例小提琴：http://jsfiddle.net/abhitalks/05Lx7eea/

Answer 3

为了完成翻转，您可以使用CSS transform。如果您愿意，这可以在pseudo-element内完成。

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

在链接的示例中，请注意边框在技术上border-top，但它出现在底部上。 CODEPEN ：http://codepen.io/pohuski/pen/bVBpNw