Tell me how to create such a white adaptive mask. I tried using svg and border , but there are problems with%.
Ps under the mask, I mean white triangle, which is above the black trapezoid
Alexandr_TT
34.7k eleven 42 161
WVFFLIFE WVFFLIFE
328 one 13
- Is the white mask white text in a black trapezoid or is it a white background around the trapezoid? - Alexandr_TT
- white triangle that is on top - WVFFLIFE
- white triangle, which is higher than the trapezoid? - Alexandr_TT
- Yes, I mean it - WVFFLIFE
|
2 answers
The solution is adaptive, works in all browsers.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 961 208" preserveAspectRatio="xMinYMin meet" > <defs> <mask id="svgMask"> <rect width="100%" height="100%" fill="white" /> <path d="M0 103.1 0 1.4l959.9 0z" fill="black" /> </mask> </defs> <rect width="100%" height="100%" fill="black" stroke="white" stroke-width="4" mask="url(#svgMask)" /> <text x="350" y="150" font-size="24px" font-family="sans-serif" fill="white" >We provide you everything</text> </svg> Parameters, text positioning are configured inside svg and the text will also adaptively adapt to any screen resolution without disturbing the layout.
Alexandr_TT Alexandr_TT
34.7k eleven 42 161
|
* { margin: 0; padding: 0; max-width: 100%; } header { display: flex; align-items: flex-end; justify-content: center; width: 100vw; height: 40vw; background: linear-gradient(-10deg, #000 0, #000 50%, transparent 50%, transparent 100%); } p { padding-bottom: 5vw; color: #fff; font-size: 2vw; } <header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquid.</p> </header> It looks not perfect, but I think the colors here for yourself you can do.
|