Triangle shape with background image
It's really easy if you use child images for the links instead of background images. You just need to skew the two .option
elements with different transform origins, then unskew their child images and set overflow: hidden
on both .pageOption
and the .option
elements. Support is good, should work for everything except IE8/7 and Opera Mini.
DEMO
Result:
HTML:
<div class='pageOption'>
<a href='#' class='option' data-inf='photo'>
<img src='../images/menuPhoto.png'>
</a>
<a href='#' class='option' data-inf='cinema'>
<img src='../images/menuCinema.png'>
</a>
</div>
Relevant CSS:
.pageOption {
overflow: hidden;
position: relative;
width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
overflow: hidden;
position: absolute;
/* arctan(27 / 40) = 34.01935deg
* need to skew by 90deg - 34.01935deg = 55.98065deg
*/
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
transform: skewX(55.98deg);
transform-origin: inherit;
}
div with triangle at the bottom with background image
Triangle over a plain color
If the triangle is displayed over a plain color, you can use this approach with an absolutely positioned pseudo element :
div{ position:relative; background:url('http://i.imgur.com/W27LCzB.jpg'); background-size:cover; min-height:100px; padding-bottom:100px; overflow:hidden;}div:after{ content:''; position:absolute; bottom:0; left:0; border-left:50vw solid #fff; border-right:50vw solid #fff; border-top:100px solid transparent;}
<div></div>
Putting an image background onto a CSS Triangle
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.
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.
There is a CSS solution that may work for you: border-image
.
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.
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.
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.
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 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 triangle with color and background-image
You can use a rotated pseudo element :
Generic solution:
FIDDLE
HTML:
<div></div>
CSS:
div {
width:200px;
height:200px;
overflow:hidden;
}
div:before {
content:"";
display:block;
width:70%;
height:70%;
background-image: url(/*Path to your image*/);
transform: rotate(-45deg);
transform-origin:0 0;
-ms-transform: rotate(-45deg);
-ms-transform-origin:0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin:0 0;
}
EDIT: Your use case
In your use case, you can consider just rotating .arrow-down
by 45deg and set overflow:hidden;
on the sections. (you also need to remove the existing borders on .arrow-down
and give it desired dimensions)
Triangle bottom CSS with background
I think clip-path
would be best in this situation. See fiddle
background-image: url('image.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
CSS triangle with background image
If you don't care for cross browser compatibility, you can use a pseudo-element that you rotate by 45 degrees and attach the styles to it. The only thing you need additionally would be the background, rotated (back) by 45deg to attach to the pseudo element:
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);
}
Here's a short fiddle to illustrate (without background):
Fiddle
To work this out for other cases but 90degree arrows, you need to skew the rect additionaly. And I don't really know what then happens with the background image...
How do I create a triangular responsive background image?
You can do this with clip-path
Result - https://jsfiddle.net/11kn8mjn/4/
How It's Done
Two fullscreen divs with responsive background images are positioned on top of each other.
Clip mask is used to show a responsive triangle of each div.
Code
Two divs positioned on top of each other:
div {
position: absolute;
width: 100vw;
height: 100vh;
}
With a responsive background image:
.div-one { background: url('http://i.imgur.com/8LgIL7B.jpg') center / cover no-repeat; }
.div-two { background: url('http://i.imgur.com/fBL4WC1.jpg') center / cover no-repeat; }
Clip path shows a triangle of each div. The triangle is made responsive using vh and vw values:
.div-one { clip-path: polygon(0 0, 100vh 0, 100vw 0); }
.div-two { clip-path: polygon(100vw 0, 0% 100vh, 100vw 100vh); }
Browser Support
Support for clip-path isn't great - http://caniuse.com/#feat=css-clip-path
Related Topics
Universal Selector * and Pseudo Elements
Absolute VS Relative Position Width & Height
How to Align an Image Dead Center with Bootstrap
What Does an "&" Before a Pseudo Element in CSS Mean
Prevent Flex Item from Exceeding Parent Height and Make Scroll Bar Work
Css: 100% Width or Height While Keeping Aspect Ratio
Remove Extra Button Spacing/Padding in Firefox
Replacing H1 Text with a Logo Image: Best Method for Seo and Accessibility
Css: Fixed to Bottom and Centered
Two-Tone Background Split by Diagonal Line Using CSS
Is Background-Color:None Valid CSS
<Input> Doesn't Inherit the Font from <Body>
How to Override the Properties of a CSS Class Using Another CSS Class