Как сделать такую css маску

234
13 июля 2018, 04:30

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

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

Answer 1

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

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

Answer 2

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

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

READ ALSO
Отображение iframe на мобильных
HTML

Отображение iframe на мобильных

У меня 2 iframe pdfОни скрыты

 178
Можно ли в шапке таблицы указать позиционирование текста?
HTML

Можно ли в шапке таблицы указать позиционирование текста?

Можно ли в html сделать так, чтобы текст отобразился в ячейке таблички так же как на рисунке?

 195
Установка шрифта для &lt;label&gt;
HTML

Установка шрифта для <label>

Пытался установить стили для шрифта label-а, но почему-то в моем приложении стили не применяютсяВесь этот блок когда находится внутри другого...

 178
Анимация персонажа прыгающей девочки
HTML

Анимация персонажа прыгающей девочки

На просторах интернета нашел гифку прыгающей девочки:

 475