Html 所有角落都有伪类的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中？我试过一些方法，比如在part之后重复div:after，但不起作用。我认为这很简单，但我不明白重点

---

提前感谢

您可以复制该div

.lol promo

并使用

transform:scale

和

absolute

将其垂直翻转到页面的右下角和左下角。这里有一个完整的代码

.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;
}

---

为了完成翻转，可以使用。如果您愿意，这可以在内部完成

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

在链接的示例中，请注意，从技术上讲，边框是

边框顶部

，但它显示在底部。 代码笔：

您可以利用

您可以定义图像的切片方式和边框宽度。获取四个值，每个值分别定义长方体的上角、右角、下角和左角。这样，就不需要任何伪元素

给出您的标记：

您只需要以下CSS：

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

切片

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

示例代码段：

.lol促销{
高度：120px；宽度：320px；边距：16px；填充：16px；
背景色：rgba（0,0128,0.1）；
边框图像：url（'//s.cdpn.io/800/endorments-sprite.png'）；
边界图像切片：40964096；
边框图像宽度：自动；
}

标题
同侧眼睑

是的，这是一个很好的观点，但如果不在DOM中添加两个元素，这真的不是另一种选择吗？哇，谢谢。。。这是清楚的最佳答案，不知道这个边界图像类，代码更少的完美解决方案！我唯一的问题是，出于某种奇怪的原因，如果我在

边框图像

之前没有

边框

类，这东西就不起作用了，哈哈。