3

Подскажите, как сверстать такую белую адаптивную маску. Пробовал через svg и border, но там возникают проблемы с %.

P.s. под маской я имею ввиду белый треугольник, который находится выше черной трапеции

введите сюда описание изображения

4
  • белая маска это белый текст в черной трапеции или это белый фон вокруг трапеции? 11 июн 2018 в 20:50
  • белый треугольник, который сверху
    – WVFFLIFE
    11 июн 2018 в 20:50
  • белый треугольник, который выше трапеции? 11 июн 2018 в 20:52
  • да, его имею ввиду
    – WVFFLIFE
    11 июн 2018 в 20:55

2 ответа 2

5

Решение адаптивно, работает во всех браузерах

<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 и текст будет, также адаптивно подстраиваться под любое разрешение экрана, не нарушая вёрстку.

0
4

* {
  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>

Выглядит не идеально , но думаю цвета здесь под себя сделать вы сможете.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.