Подскажите, как сверстать такую белую адаптивную маску. Пробовал через svg
и border
, но там возникают проблемы с %.
P.s. под маской я имею ввиду белый треугольник, который находится выше черной трапеции
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите, как сверстать такую белую адаптивную маску. Пробовал через svg
и border
, но там возникают проблемы с %.
P.s. под маской я имею ввиду белый треугольник, который находится выше черной трапеции
Решение адаптивно, работает во всех браузерах
<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>
Параметры, позиционирование текста настраиваются внутри svg и текст будет, также адаптивно подстраиваться под любое разрешение экрана, не нарушая вёрстку.
* {
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>
Выглядит не идеально , но думаю цвета здесь под себя сделать вы сможете.