Геометрическая фигура CSS

197

11 марта 2018, 21:00

Всем привет! Возможно вопрос для многих очень прост , но все же мне надоело использовать картинку , и хочу по немного расти , подскажите пожалуйста как реализовать такую геометрическую фигуру, она должна быть адаптивной

Answer 1

Это делается с помощью skew:

* { 
  margin: 0; 
  padding: 0; 
} 
 
div { 
  margin: 20px; 
  padding: 0; 
  position: relative; 
  width: 75px; 
  height: 25px; 
  color: #ffffff; 
} 
 
p { 
  position: absolute; 
  background-color: blue; 
  width: 100%; 
  height: 100%; 
  transform: skew(15deg) 
} 
 
span { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  line-height: 1.5; 
}

<div> 
  <p></p> 
  <span> 
    Lorem 
  </span> 
</div>

Вариант на SVG с тем же skew:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewBox="0 0 500 500"> 
  <rect transform="skewX(15)" width="100" height="50"/> 
  <text fill="white" x="35" y="30">Lorem</text> 
</svg>