div with triangle at the bottom with background image

by

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>

The left and right parts of the triangle are hidden by the left and right borders of the pseudo element. That is why this approach won’t work over a gradient or image.

Triangle over an image or gradient

In these cases, you can use an inline svg with clipPath and a polygon element :

body, html{
  height:100%;
  background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center;
  background-size:cover;
}
svg{
  display:block;
  width:100%;
  }
<svg viewbox="0 0 100 40">
  <clipPath id="clip">
    <polygon points="0 0 100 0 100 25 50 40 0 25" />
  </clipPath>
  <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg"  width="100" height="65" clip-path="url(#clip)"/>
</svg>

There are other possible approaches for the same result. You can find some here : CSS Transparent arrow/triangle

More Related Contents:

  1. How to create a circle with links on border side
  2. html/css hexagon with image inside
  3. Responsive CSS Trapezoid Shape
  4. Circular percent progress bar
  5. Creating a ‘New’ spiky label with 24 or above point burst
  6. How do I create a teardrop in HTML?
  7. Fill SVG path element with a background-image
  8. How to modify the fill color of an SVG image when being served as background image?
  9. Curve bottom side of the div to the inside with CSS
  10. SVG drop shadow using css3
  11. CSS Progress Circle
  12. border curved css – circle with curved end
  13. Elongated hexagon shaped button using only one element
  14. Easier way to create circle div than using an image?
  15. HTML5 / CSS3 Circle with Partial Border
  16. How to draw a trapezium/trapezoid with css3?
  17. Draw Circle using css alone [duplicate]
  18. How to add border to a container with transparent gaps in between
  19. How to create a curved speech bubble?
  20. How to calculate required hue-rotate to generate specific colour?
  21. How can I create a wavy shape CSS?
  22. How to Make A Chevron Arrow Using CSS?
  23. CSS transform origin issue on svg sub-element
  24. CSS Zigzag Border with a Textured Background
  25. Square DIV where height is equal to viewport
  26. Create a Reverse Clip-Path – CSS or SVG
  27. Internet Explorer and clip-path
  28. How to transform each side of a shape separately?
  29. How to curve the div from bottom with image background
  30. How to create a ribbon shape in CSS

Leave a Comment