Triangle Bottom CSS with Background

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



Leave a reply



Submit