html - 带背景图像的 CSS 三角形

Question

尊敬的stackoverflowers，

如何创建具有背景图案的三角形元素？

例如，我需要这样的 div：

但我的状态是这样的：

所有带有三角形元素的示例都使用不能有 img 的边框......

这是我需要coolarrow的小节类：

<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 度箭头之外的其他情况下解决此问题，您需要额外倾斜矩形。而且我真的不知道背景图像会发生什么......

Answer 2

继续http://apps.eky.hk/css-triangle-generator/并生成它：D

或者

#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Answer 3

将图像作为 div 的背景，并将边距设置为负值以使其覆盖在栏上。示例（尽管估计，但我绝不声称这行得通）将是 margin-left: -20px; 边距顶部：-20px；并在行后拥有它。

或者使用@Py 的答案，您可以使用此 CSS 作为箭头，并执行相同的负边距以使其对齐。

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }