Как сделать блоку фон в виде трапеции?

#html #css

Есть вот такой бэкграунд


Вставлять картинкой не хочется. Как лучше сделать его на css?
    

Ответы

Ответ 1

А вам кроссбраузерно или как?)

Можете использовать clip-path ( очень нравится эта штука )
Вот генератор
Можете поиграться с rotate ( но кода будет побольше )



body {
  background: #fff;
}
.wrap {
  position: relative;
  width: 250px;
  height: 190px;
  top: 150px;
  margin: auto;
  overflow: hidden;
}
.wrap:before,
.wrap:after {
  transform-origin: center center;
}
.wrap:before {
  content: " ";
  position: absolute;
  width: 150%;
  height: 50px;
  top: -10px;
  left: -10px;
  background: #fff;
  transform: rotate(9deg)
}
.wrap:after {
  content: " ";
  position: absolute;
  width: 150%;
  height: 70px;
  bottom: -25px;
  left: -10px;
  background: #fff;
  transform: rotate(3deg)
}
.block {
  width: 100%;
  height: 100%;
  background: #333;
}

  




Ответ 2

clip-path посоветовали, а т.к. всё это шаманство родом из svg, несколько кликов в
векторном редакторе и навскидку



#rect1,
#rect2,
#rect3,
#rect4 {
  position: relative;
  width: 97vw;
  height: calc(97vw * 0.5);
  margin-top: 10%;
}
#rect1:before,
#rect3:before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
}
#rect1:before {
  background-color: black;
  transform: matrix(0.9901338, 0.14012513, 0, 1, 0, 0);
  height: 75%;
}
#rect3:before {
  background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYyMiAzMDEiPgogIDxnIGlkPSJwYXJsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTcuNzg2IC0zNTkuMDQpIj4KICAgIDxwYXRoIGQ9Im01Ny43ODYgMzU5LjA0IDYyMi4yMyA5NS43MyAwLjQ0IDIwNS44MS02MjIuMjItNDcuMDJ6IiBmaWxsPSIjMDAwIi8+CiAgPC9nPgo8L3N2Zz4=")
no-repeat scroll 0% 0% / 100% auto;
  height: 100%;
}
#canvas {
  width: 100%;
}
1. css transform - противополжные стороны равны


2. inline svg - один из вариантов использования

  

2. css base64 background - кодирование
svg



4. canvas


  










Ответ 3

К предложенным выше, добавлю вариант с помощью border. На мой вкус, самый простой)

Фигуры на CSS: https://habrahabr.ru/post/126207/



.block {
  width: 250px;
  height: 150px;
}
.wrap {
  width:500px;
  background-color: grey;  
  position: relative;  
  background-color: #333;
  margin: 60px;
}
/* верхний скос */
.wrap::before {  
  content: "";
  position: absolute;
  display: block;
  border-top: 45px solid transparent;
  border-left: 500px solid #333;  
  top: -45px;
}
/* нижний скос */
.wrap::after {
  content: "";
  position: absolute;
  display: block;
  border-bottom: 15px solid transparent;
  border-right: 500px solid #333;
  bottom: -15px;
}

  




Ответ 4

html {
  height: 400px;
  background: 
    linear-gradient(10deg, transparent 0, transparent 35%, silver 35%, silver 65%,
transparent 65%, transparent 100%),
    linear-gradient( 5deg, transparent 0, transparent 25%, silver 25%, silver 55%,
transparent 55%, transparent 100%),
    white;
}