How to trim the bottom of the image?

Hello!

Features 2 units, each of the blocks set bg image. How bg of the first unit from the bottom be cut off so that got about what is on the screenshot?
5a7313c9a3790022469962.png

Thank you!
June 8th 19 at 16:59
2 answers
June 8th 19 at 17:01
Solution
The question was decided as follows:

.container {
width:100%;
height:100%;
background:grey;
background-position: 0% 50%;
}


<div class="container">
<svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="none">
<defs>
 <clipPath id="clip" clipPathUnits="objectBoundingBox">
 <polygon points="0,1 0,0.5 0.5,0.67 1,0.5 1,1"/>
</clipPath>
</defs>
 <image href="http://placeimg.com/400/300/any" clip-path="url(#clip)" width="100%" height="100%"/>
</svg>
</div>
June 8th 19 at 17:03
make a triangle using pseudo elelements, but rather a border-s.
pow
It helps if a solid block of color. The author on the background of the image is cropped on the contour. - casimer.Marquardt80 commented on June 8th 19 at 17:06
black block solid colors, overlaps the images. Of course, the triangle for photos do. Although there can be, but with the help of svg masks for example. - Henderson_Beat commented on June 8th 19 at 17:09
Black bloc - also with the image, look. - casimer.Marquardt80 commented on June 8th 19 at 17:12
Is the transparency on the block, it's transparent bottom. In General, the author might mention details such that we're not here arguing and not watched. Maybe it's a coincidence? But in any case, the svg mask solves. - Henderson_Beat commented on June 8th 19 at 17:15
both block images, the actual question is
each of the blocks set bg image
- mercedes_Kessler91 commented on June 8th 19 at 17:18
the answer is: the svg mask, I can still repeat 18 times - Henderson_Beat commented on June 8th 19 at 17:21

Find more questions by tags HTMLCSS