带有背景图像的CSS三角形[重复]答案

【问题标题】：CSS triangle with background image [duplicate]带有背景图像的CSS三角形[重复]
【发布时间】：2013-07-16 02:06:05
【问题描述】：

尊敬的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 ？ ... 谢谢。

【问题讨论】：

我认为这个问题回答了类似的问题stackoverflow.com/questions/11379085/…
不，它不是重复的......需要有一个形状但有图像背景的图像......而不是从边框输入的颜色......
你会考虑使用 SVG 而不是 CSS 吗？可能会更容易。

标签： html css transform css-shapes

【解决方案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); 
}

这里有一个简短的说明（没有背景）：
Fiddle

要解决除 90 度箭头以外的其他情况，您需要额外倾斜矩形。而且我真的不知道背景图片会发生什么......

【讨论】：

谢谢……请看我的更新……我从你那里得到了一些想法……

【解决方案2】：

将图像作为 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; }

【讨论】：

谢谢......请看我的更新......
要将其置于顶部，请在箭头 div 的 CSS 类中添加 margin-top: -10px（更改 10 以查看适合您的需要）。
没有箭头类了....使用before和after的伪元素...我已经发布了整个css...你可以看看...谢谢
添加 margin-top: -10px 到刚刚增加侧面之后...不是箭头的位置...它仍然在左侧..dosent 指向顶部...跨度>
我作为答案发布的代码将使箭头指向上方。

【解决方案3】：

继续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; 
}

【讨论】：