与背景图象的CSS三角

Question

尊敬的stackoverflowers,

如何使用背景图案创建三角形元素？

例如,我需要像这样的div:

但我的状态是这样的:

所有带有三角形元素的例子都使用了边框,这些边框不能使用img ....

这是我的小节课,需要colarrowrow:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>

.subsection {
  .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
  background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
  display: block;
  clear: both;
  float: left;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: none;
}
.subsection {
    position:relative;
}
.subsection:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:0;
    border-left:20px solid white;
    border-bottom:16px solid transparent;
}
.subsection:after {
    content:'';
    position:absolute;
    top:36px;
    left:0;
    bottom:0;
    width:0;
    border-left:20px solid white;
    border-top:16px solid transparent;
}

我得到:

哪个好......我怎么能把箭头放在顶部的所需形式？...并覆盖案例div？... 谢谢.

Answer 1

如果您不关心跨浏览器兼容性，可以使用旋转 45 度的伪元素并将样式附加到它。您唯一需要额外的是背景，旋转（向后）45 度以附加到伪元素：

div.coolarrow:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -24.7px;
    left: 10px;
    background-color: #bada55;
    width: 50px;
    height: 50px;

    background: url(url/to/your/45deg/rotated/background.gif);

    box-shadow: inset 0 0 10px #000000;
    transform: rotate(45deg); 
}

这是一个简短的小提琴来说明（没有背景）：
小提琴

要在除 90 度箭头之外的其他情况下解决此问题，您需要额外倾斜矩形。我真的不知道背景图像会发生什么......