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.
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>
Add triangle to top of div with background image in CSS
Could achieve your design using another div. Hope you'll like it :)
.bg { position: relative; background: url('http://i.imgur.com/W27LCzB.jpg'); background-size: cover; width: 100%; padding-top: 50px; height: 200px;}
.bg:before { content:''; border-left: 50px solid #fff; border-right: 50px solid #fff; border-bottom: 50px solid transparent; position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 0;}
.helper { position: absolute; height: 50px; top: 0; left: 0; right: 0;}
.helper:before, .helper:after { content: ""; background: white; position: absolute; top: 0; bottom: 0; width: calc(50% - 50px);}
.helper:before {left: 0;}.helper:after {right: 0;}
<div class="bg"> <div class="helper"></div></div>
Make a CSS triangle with transparent background on a div with white bg image?
The Fiddle:
http://jsfiddle.net/JaMH9/2/
The HTML:
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
The CSS:
.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
div with css triangle in the background
Try use the Cross browser tecnique of triangle shape.
It is cross browser and not give pixelate effect.
Here is a working demo.
How can I add background color to CSS triangles?
DEMO
.timeline-panel {
background-color:red!important;
}
.timeline > li > .timeline-panel:after {
border-left:14px solid red!important;
border-right: 0 solid red!important;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left:14px solid #fff!important;
border-right-width: 14px!important;
border-left-width: 0!important;
}
You don't need !important
if you ordered your rules properly and/or modified the values accordingly, but it's there so the rule is shown at the top of the page.
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%);
I need to include a triangle as background on a div using css.
you can try adding pseudo element to the box, and then using borders create triangle, check below snippet:
.box{ width: 500px; height: 300px; background: #233058; padding: 20px 40px; position: relative; z-index:-1;}
.box:before{ content: ''; width: 0px; height: 0px; background: transparent; position: absolute; right: 0px; top: 0px; display: block; z-index: 100; border-left: 80px solid transparent; border-bottom: 150px solid transparent; border-right: 150px solid rgba(70, 88, 158, .5); border-top: 80px solid rgba(70, 88, 158, .5); z-index: 0;}
h1, P{ color: white; font-family: Arial; font-weight: lighter; position: relative; z-index: 999;}
p{ font: 1.5em sans-serif; }
<div class="box"> <h1>Request and instance</h1> <p>Need to add the triangle to the top right corner of a div and make text flow over it. </p></div>
Related Topics
Use Excel Vba to Click on a Button in Internet Explorer, When The Button Has No "Name" Associated
Detecting 'Transform: Translate3D' Support
Semantically, Which Is More Correct: a in H2, or H2 in A
CSS Position Absolute and Full Width Problem
Streaming a Video from Google Drive Using HTML5 Video Tag
Why Is The First Element Always Blank in My Rails Multi-Select, Using an Embedded Array
Pure CSS Rotate Animation Broken While in Infinite Loop
What Happens When Localstorage Is Full
CSS Layout 2-Column Fixed-Fluid
Inline Form Nested Within Horizontal Form in Bootstrap 3
How to Set the Space Between Lines in a Div Without Setting Line Height
Default Website Image for Social Sharing
How to Align Text Directly Beneath an Image
Fixed Header, Footer, and Sidebars with Scrolling Content Area in Center
Why Is "&Reg" Being Rendered as "®" Without The Bounding Semicolon
How to Align Texts Inside of an Input