admin管理员组

文章数量:1355535

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle.

so..

<div>
   <img src='some_image' />
</div>

Where the image is a square, but the DIV containing the image is a triangle. / solves this very well except this solution is not x-browser friendly (non-ie).

/ looks interesting, however this relies on PHP.

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle.

so..

<div>
   <img src='some_image' />
</div>

Where the image is a square, but the DIV containing the image is a triangle. http://www.script-tutorials./creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie).

http://css3pie./ looks interesting, however this relies on PHP.

Share Improve this question edited Mar 3, 2015 at 12:22 user1118321 26.4k4 gold badges58 silver badges89 bronze badges asked Apr 15, 2011 at 16:14 Niels Robin AagaardNiels Robin Aagaard 2266 silver badges14 bronze badges 3
  • 3 CSS3Pie will not be of any use whatever to your question. However, you are wrong to say it relies on PHP; it doesn't. – Spudley Commented Apr 15, 2011 at 16:19
  • I just realized that too, that it doesnt need PHP, my mistake. However it CSS3PIE could translate plex CSS3 for me into something IE would understand, it would solve my problem, however it seems not to support transform/matrix, anyway, Raphael looks like a very viable option. – Niels Robin Aagaard Commented Apr 15, 2011 at 19:35
  • You may also check this answer : stackoverflow./questions/7073484/… with this demo : codepen.io/web-tiki/pen/ntmDK – web-tiki Commented Nov 24, 2014 at 8:12
Add a ment  | 

2 Answers 2

Reset to default 6

You can't create a non-rectangular DOM element.

There are a few ways to hack it.

Firstly, there is a method of using CSS borders with varying widths on each side of the element to make it look triangular. It will still be a rectangle, but it will look like a triangle.

There's a tutorial on this here: http://www.russellheimlich./blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

The down-side of this approach is that it is limited to creating right-angled triangles. You can join several of them together to get around this, but then you don't have a single container for your image.

An alternative hacky way of doing it would be to place rotated elements on top of the main element so that they cover the appropriate parts of the image and make it look triangular. This works in all browsers, although IE does have some very nasty syntax to do rotation, and it's quite heavy on the browser, considering that you'd only be using it to make shapes.

Another option might be to use CSS transforms. However this is only supported by a minority of up-to-date browsers, so it won't work for most users.

A better approach might be to use a proper graphics library for this, rather than trying to shoe-horn it into a <div> element.

I'd remend using Raphael. It's a Javascript library which can draw directly into the browser using SVG (or VML for IE). It's trivial to create triangles using it and to fill them with a graphic. See the examples on the Raphael home page to get you started.

Depending on what you want the oute to be, as far as i'm aware you cant make a triangle DIV without Transform:; However one solution would be having a div positioned inside the div in question with a PNG cutting of half the image showing only the transparent part through. Not sure if this is a viable option for you though.

本文标签: javascriptHow would one create a triangle container for an image (xbrowser)Stack Overflow