Как добиться эффекта сложенного гармошкой листа с помощью CSS?

#css #вёрстка

Подскажите как такое сверстать. Интересует именно блоки в виде трапеций с обводкой.
Фон, стрелки, текст - то все понятно.
    

Ответы

Ответ 1

Я предлагаю вашему вниманию альтернативное решение. 

Из минусов:  


поскольку смещение и ширина срезов вычисляется не по математической формуле, а "на
глазок", есть небольшой косячок на границе в левом верхнем углу блока.  
лишняя разметка  
в примере нет префиксов


Из плюсов:  


на текст нет никакого влияния.




Основная идея:  

С помощью псевдоэлементов и дополнительной разметки мы можем "срезать" лишнее с краев
прямоугольника, чтобы превратить его в трапецию.
Чтобы получился не просто срез, а граница блока, будем использовать два одинаковых
по размеру блока разного цвета, разместив их один над другим с небольшим смещением.



Реализация:



* {
  box-sizing: border-box;
}

/* Обертка нужна для обрезки "лишнего" в разметке */

.wrapper {  
  margin: 0 20px;
  max-width: 510px;
  overflow: hidden;
}

/* трапеция*/

.item {
  border: 2px solid #606060;
  height: 120px;
  background: #f5f5f5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Чтобы текст не залезал на наши будущие срезы */
  padding: 10px 30px;
}

/* Перекрашиваем четные трапеции */

.item:nth-child(even) {
  background: #606060;
  color: #fff;
}
/* Подложки, для имитации границы */

.item::before,
.item::after,
.item .border {
  content: '';
  display: block;
  height: 100%;
  width: 80px;
  position: absolute;
}

/* Нижний слой подложки для цвета границы */

.item::before,
.item::after {
  background: #606060;
  top: 0;
}

/* Верхний слой подложки для "среза" прямоугольника */

.item .border {
  background: #fff;
  height: calc(100% + 4px);
  top: -2px;
}

/* Наклон среза для четных трапеций */

.item:nth-child(odd)::before,
.item:nth-child(odd)::after,
.item:nth-child(odd) .border.left {
  transform: skew(10deg);
}

.item:nth-child(odd)::after,
.item:nth-child(odd) .border.right {
  transform: skew(-10deg);
}

/* Наклон среза для нечетных трапеций */

.item:nth-child(even)::before,
.item:nth-child(even)::after,
.item:nth-child(even) .border.left {
  transform: skew(-10deg);
}

.item:nth-child(even)::after,
.item:nth-child(even) .border.right {
  transform: skew(10deg);
}

/**
 * Выравниваем нижний и верхний слой подложки друг относительно друга
 * Учитываем левый и правый срез
 */

.item::before {
  left: -70px;
}
.item .border.left {
  left: -72px;
}
.item::after {
  right: -70px;
}
.item .border.right {
  right: -72px;
}

/**
 * ::after всегда последний, поэтому надо выставить z-index для правого верхнего слоя
 */

.item .border.right {
  z-index: 1;
}

/**
 * Максимум 5 строчек текста
 * Вместо отображения скролла текст можно прятать
 */

.item > .text {
  line-height: 20px;
  max-height: 100%;
  overflow-y: auto;
}

  

    

    
Пример контента
    

  
  

    

    
Curabitur aliquet quam id dui posuere blandit. Vestibulum ac
diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Donec
rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec,
egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non
nisi. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat.
Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt
nibh pulvinar a.
    

  
  

    

    
Здесь что-то написано
    

  



Ответ 2

.trapezoid-in {
  border: 2px solid #000;
  width: 400px;
  height: 100px;
  background: #ccc;
  transform: perspective(15px) rotateX(-1deg);
  margin: 6px 50px 0;
}

.trapezoid-out {
  border: 2px solid #555;
  width: 400px;
  height: 100px;
  background: #555;
  transform: perspective(15px) rotateX(1deg);
  margin: -6px 50px 0;
}





Ответ 3

Еще как вариант



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b {
  max-width: 500px;
  margin: 25px auto;
  padding: 0 20px;
}
.b-trapezoid {
  background: #F5F5F5;
  padding: 15px;
  border: 2px solid #606060;
  height: 100px;
  position: relative;
}
.b-trapezoid:before,
.b-trapezoid:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 100%;
  background: #F5F5F5;
  border: 2px solid #606060;
}
.b-trapezoid:before,
.b-trapezoid:nth-of-type(even):before {
  top: -2px;
  left: -7px;
  -webkit-transform: skew(7deg);
  transform: skew(7deg);
  border-right: none;
}
.b-trapezoid:after,
.b-trapezoid:nth-of-type(even):after {
  top: -2px;
  right: -7px;
  background: #F5F5F5;
  -webkit-transform: skew(-7deg);
  transform: skew(-7deg);
  border-left: none;
}
.b-trapezoid:nth-of-type(even),
.b-trapezoid:nth-of-type(even):before,
.b-trapezoid:nth-of-type(even):after {
  background: #606060;
  color: #fff;
}
.b-trapezoid:nth-of-type(even):before {
  -webkit-transform: skew(-7deg);
  transform: skew(-7deg);
  border-left: none;
}
.b-trapezoid:nth-of-type(even):after {
  -webkit-transform: skew(7deg);
  transform: skew(7deg);
  border-right: none;
}
.b-trapezoid-content {
  display: table;
  width: 100%;
  height: 70px;
  text-align: center;
}
.b-trapezoid-content-item {
  display: table-cell;
  vertical-align: middle;
}
.b-trapezoid-content-text {
  max-height: 75px;
  overflow-y: auto;
}
.b-trapezoid-content-text::-webkit-scrollbar {
  width: 4px;
}
.b-trapezoid-content-text::-webkit-scrollbar-button {
  background: #ccc;
  height: 0;
}
.b-trapezoid-content-text::-webkit-scrollbar-track-piece {
  background: #ccc;
}
.b-trapezoid-content-text::-webkit-scrollbar-thumb {
  background: #4682B4;
}

  

    

      

        

          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
        
      
    
  
  

    

      

        

          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
        
      
    
  
  

    

      

        

          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
        
      
    
  
  

    

      

        

          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
        
      
    
  
  

    

      

        

          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?
          
Как добиться эффекта сложенного гармошкой листа с помощью CSS?