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?
Thank you!
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?
Thank you!
asked June 8th 19 at 16:59
2 answers
answered on
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> answered on June 8th 19 at 17:03
make a triangle using pseudo elelements, but rather a border-s.
pow
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 - 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