CODEWITHSUNDEEP
htmlcss
Thijs Kempers
Thijs Kempers

Reputation: 469

Triangle bottom CSS with background

*I know it's duplicated from this How to create a polygon shape div , but I don't know how to fix it on the bottom. I really tried everything, and I don't understand how it's done. Can someone help me with this please? *

I am slicing a design I received. But now I walk into a problem.

I want to cut the background of my slider in a triangle shape ( see image ).

How can I do this in CSS3?

NOTE: It has to be responsive.

enter image description here

Upvotes: 0

Views: 1559

Answers (1)

cocoa
cocoa

Reputation: 3921

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%);

Upvotes: 2

Related Questions