与伪类CSS精灵在各个角落

我发现this codepen这是使用这个精灵添加的角落：与伪类CSS精灵在各个角落

与此代码：

.lol-promo:before, 
.lol-promo:after { 
    background: url("http://s.cdpn.io/800/ornaments-sprite.png") no-repeat; 
    content: ""; 
    height: 40px; 
    position: absolute; 
    top: 0; left: 0; 
    width: 95px; 
} 

.lol-promo:after { 
    background-position: -95px 0; 
    left: auto; right: 0; 
}

但在codepen例子是只使用顶角，我怎样才能将底角也添加到简单的div？我尝试了一些东西，如重复div：部分后，但没有工作。我认为它很简单，但我不明白这一点。

在此先感谢

来源

2015-09-26 aluknot

您可以使用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/

来源

2015-09-26 07:56:12 Abhitalks

哇，谢谢...这是最好的答案，不知道这个边界图像类，少代码的完美解决方案！ – aluknot

我遇到的唯一问题是，如果我在'border-image'之前没有'border'类，那么这个东西不起作用，哈哈。 – aluknot

您可以复制该div .lol-promo与transform:scale垂直翻转底部者和absolute他们位置的底部右侧和左侧的页面。这是一个小提琴https://jsfiddle.net/az6juLkq/1/与完整的代码。

.lol-promo.left, 
.lol-promo.right { 
    position: absolute; 
    -moz-transform: scale(1, -1); 
    -webkit-transform: scale(1, -1); 
    -o-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    transform: scale(1, -1); 
} 
.lol-promo.left{ 
    bottom: 0; left: 0; 
} 
.lol-promo.right { 
    bottom: 0; right: 0; 
    background-position: -95px 0; 
    right: 0px; 
}

来源

2015-09-26 02:30:55 amespower

是啊，是好点，但真的不是另一种选择这样做没有增加两个DOM中的元素？ – aluknot

为了完成翻盖，您可以使用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

来源

2015-09-26 03:49:36 Huski

与伪类CSS精灵在各个角落

回答

相关问题