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>
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%);
How to make a triangle shape in the bottom of the div
I'd go with clip-path
to achieve something like this.
.clipped {
clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);
}
img {
max-width: 100%;
width: 100%;
}
<div class="clipped">
<img src="https://loremflickr.com/1280/720">
</div>
CSS triangle background
To convert the top triangles to bottom triangles, add 180 deg to the current angles:
.secondSection {
background-image:
linear-gradient(176deg, #ff7a7d 75%, transparent 75%),
linear-gradient(184deg, #ff7a7d 75%, transparent 75%);
text-align: center;
height: 100vh;
}
body {
margin: 0;
}
<div class="secondSection"></div>
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.
CSS Triangle bottom right of parent div
I created a container for the amount with absolute position right 3px and bottom -45px.
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
.amountContainer{
position:absolute;
padding:1%;
bottom:-45px;
right:3px;
}
<div class="container">
<div class="gradeTriangle">
<div class="amountContainer">$25</div>
</div>
</div>
Center Triangle at Bottom of Div
Can't you just set left
to 50%
and then have margin-left
set to -25px
to account for it's width: http://jsfiddle.net/9AbYc/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
or if you needed a variable width you could use: http://jsfiddle.net/9AbYc/1/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
Related Topics
Play Infinitely Looping Video On-Load in HTML5
Flexbox on Ie11: Image Stretched for No Reason
Aligning Elements Left and Center with Flexbox
Placing a <Div> Within a <Canvas>
How to Write Equations in HTML
Rounded Corners in Outlook Without Images
Can Div with Contenteditable=True Be Passed Through Form
How to Put a <Style>...</Style> Tag Within the Body of a HTML File to Send in Email
How to Change Content on Hover
How to Disable the Spell Checker on Text Inputs on the Iphone
Changing the Text Selection Color Using CSS
HTML Generated Microsoft Word Document with Header, Footer and Watermark
How to Remove the Top Margin in a Web Page
Delay HTML5 :Invalid Pseudo-Class Until the First Event