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.
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>
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>
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...
Draw triangle in corner of div
You can use position: absolute
on triangle element and set top
and right
properties to 0.
.container { position: absolute; top: 5%; left: 5%; width: 60%; height: 30%; background: black; color: white; border-radius: 12px; overflow: hidden;}
.triangle { width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 0; border-color: transparent #608A32 transparent transparent; right: 0; top: 0; position: absolute;}
<div class="container"> <div class="triangle"></div></div>
How do i create a triangle div with a border and a background property?
here is the solution (without border):
html:
<div class="arrow-up" id="arrow-up"></div>
css:
.arrow-up {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid green;
position: absolute;
}
JavaScript:
//Make the DIV element draggagle:
dragElement(document.getElementById("arrow-up"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
Triangle with border:
html:
<div class="arrow-up" id="arrow-up">
<div class="inside-triangle"></div>
</div>
css:
.arrow-up {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 70px solid green;
position: absolute;
}
.inside-triangle {
left: -60px;
top: 6px;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid blue;
position: absolute;
}
JavaScript:
//Make the DIV element draggagle:
dragElement(document.getElementById("arrow-up"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
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.
How do CSS triangles work?
CSS Triangles: A Tragedy in Five Acts
As alex said, borders of equal width butt up against each other at 45 degree angles:
When you have no top border, it looks like this:
Then you give it a width of 0...
...and a height of 0...
...and finally, you make the two side borders transparent:
That results in a triangle.
Related Topics
Fade in Fade Out on Image Hover Using CSS3
Reverse Svg Line Drawing Animation
Color "Transparent" Not Working
Creating Custom Blocks in Rstudio's Bookdown
How to Detect CSS Inheritance Source
What's The Point of Gutters in CSS Grid Frameworks
How to Center The Zurb Foundation Top Bar Nav
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS
How to Make Leaflet Map Height Variable
Make Sidebarpanel Autoscroll with Mainpanel in Shiny
CSS Calc Invalid Property Value
Half Pixel in Border Width Size It Is Not Showing
Make Some Gradient Move Endlessly in a Progress Bar Like in Windows 7