CSS三角形的背景图像

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

例如，我需要这样的DIV：

enter image description here

但我的状态是这样的：

enter image description here

与三角形元素的所有例子都使用它不能有一个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; 
}

并即时得到：

enter image description here

这很好......我怎么能带来的箭头顶在需要的形式？ ...并覆盖案例div？ ... 谢谢。

来源

2013-07-17 SkyKOG

我认为这个问题回答过类似的问题 http://stackoverflow.com/questions/11379085/make-a-css-triangle-with-transparent-background-on-a-div-with-white-bg-image?rq=1 – matthiasgh

不，它不是一个复制....需要有形状的图像，但与图像背景...不wi th从边界输入的颜色.... – SkyKOG

你会考虑使用SVG而不是CSS吗？它可能更容易。 – Spudley

如果你不喜欢跨浏览器兼容，你可以用你旋转45度一个伪元素，并附加样式它。你需要另外将是背景的唯一的事，旋转（回）由45deg附加到伪元素：

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度的箭头，你需要扭曲rect另外。我真的不知道是什么，然后与背景图像会发生......

来源

2013-07-17 14:44:04 nirazul

谢谢...请参阅我的更新....我从你的想法.... – SkyKOG

将图片作为div的背景，并将边距的负值放到条上。例子（虽然估计，我绝不会声称这个工作）将是margin-left：-20px; margin-top：-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; }

来源

2013-07-17 14:36:48

谢谢...请参阅我的更新.... – SkyKOG

为了将它带到顶部，在箭头div的CSS类中添加了“margin-top：-10px”（将10更改为适合您的需求）。 – 2013-07-17 15:20:14

没有箭头类了......使用伪元素之前和之后...我发布了整个CSS ...你可以看到请...谢谢 – SkyKOG

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

来源

2013-07-17 14:49:13

CSS三角形的背景图像

回答

相关问题