将图像背景放到CSS三角形上 [英] Putting an image background onto a CSS Triangle

问题描述

我想在一个使用CSS边框创建一个三角形的div上放置一个背景图片。这是我目前的努力。

I'm trying to put a background image on a div that is using CSS borders to create a triangle. This is my current efforts so far. It works fine with solid colours, but I am at a loss when it comes to images.

HTML

<div class="wrapper">
  <div class="left triangle"></div>
  <div class="right triangle"></div>
</div>

CSS

.wrapper {
  padding:50px 0px;
  height: 50px;
  position: relative;
  width: 300px;
  background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}

.triangle {
  border-bottom: 50px solid #eee;
  width: 50px;
  position: absolute;
  bottom: 0;
}

.right {
    right: 0;
    border-left: 100px solid transparent;
}

.left {
    left: 0;
    border-right: 100px solid transparent;
}

jsfiddle： http://jsfiddle.net/aRS5g/9/

jsfiddle: http://jsfiddle.net/aRS5g/9/

所以，看看JS Fiddle我会让那个灰色部分也是我选择的图像背景，而不是使用诸如＃111，#eee等颜色。

so, looking at that JS Fiddle, how would i make that gray section also an image background of my choice, rather than having to use colours such as #111, #eee, etc..

推荐答案

CSS中的三角形是一个黑客，通过显示元素边框的部分来创建。因此，您看到的三角形不是一个元素本身，而是一个CSS边框。

A triangle in CSS is a hack, created by displaying parts of the border of an element. Therefore, the triangle that you see is not an element itself, but a CSS border.

边框不能使用普通CSS image style，这是你开始看到CSS三角形的局限性，以及为什么它真的是一个黑客，而不是一个好的技术。

The border cannot be styled using the normal CSS background-image style, and this is where you start seeing the limitations of CSS triangles, and why it really is a hack rather than a good technique.

有一个可能适用于您的CSS解决方案： border-image 。

There is a CSS solution that may work for you: border-image.

border-image 一个CSS样式，做你想要的;它将图像放入元素的边框。因为CSS三角形是一个边框，你可以使用它把一个背景图片放到你的三角形。

border-image is a CSS style that does what you'd expect; it puts an image into the border of an element. Since the CSS triangle is a border, you could use it to put a background image onto your triangle.

但是，事情变得复杂。 border-image 样式设计为样式边框，而不是三角形;它具有用于设计角和边的特征，以及适当地拉伸图像。我没有尝试过一个三角形，但我可以预测，它可能有一些怪癖，使它难以使用。

However, things do get complicated. The border-image style is designed to style borders, not triangles; it has features for styling corners and sides, and stretching images appropriately. I haven't tried it with a triangle, but I can predict that it may have some quirks that make it tricky to use. But feel free to give it a go.

border-image 的另一个问题是浏览器支持。这是一个相对新的CSS样式，并且在许多当前浏览器，包括所有版本的IE完全不支持。您可以在 CanIUse 上查看完整的浏览器支持表。

The other problem with border-image is browser support. It's a relatively new CSS style, and is completely unsupported in many current browsers, including all versions of IE. You can see the full browser support table for it at CanIUse.

由于所有这些问题，我建议如果你想在浏览器中绘制形状，你真的应该考虑放弃CSS黑客，并使用SVG或Canvas。

Because of all these issues, I would suggest that if you want to draw shapes in the browser, you really should consider dropping CSS hacks, and using SVG or Canvas. These are well supported in most browsers, and obviously support all the drawing features you could possibly want.

CSS三角形非常适合制作偶尔出现的箭头形状，但是对于任何更多的图形复杂的，它是一个更容易使用正确的图形，而不是试图越来越多的黑客入你的CSS代码。

CSS triangles are great for making the occasional arrow shape, but for anything more complex than that it's a lot easier to use proper graphics rather than trying to pile more and more hacks into your CSS code.

这篇关于将图像背景放到CSS三角形上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！