主页 / 问题 / 579667
Accepted
Katerina Pidan
Asked:2020-10-18 21:13:03 +0000 UTC2020-10-18 21:13:03 +0000 UTC

如何用CSS实现手风琴折叠的叶子效果？

  • 772

积木

请告诉我怎么做。对带笔划的梯形形式的块感兴趣。背景、箭头、文字——一切都很清楚。

css

3 个回答

  1. .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;
}
    <div class="trapezoid-in"></div>
<div class="trapezoid-out"></div>
<div class="trapezoid-in"></div>

    • 13
  2. Best Answer

    我为您提供替代解决方案。

    缺点：

    • 由于切片的偏移量和宽度不是通过数学公式计算的，而是“通过眼睛”计算的，因此块左上角的边框上有一个小门框。
    • 额外标记
    • 示例中没有前缀

    来自专业人士：

    • 对文本没有影响。

    大意：

    在伪元素和附加标记的帮助下，我们可以“切掉”矩形的边缘，将其变成梯形。
    不仅要获得切片，还要获得块边框，我们将使用两个大小相同、颜色不同的块，将它们一个放在另一个上面，稍微偏移一下。

    执行：

    * {
  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;
}
    <div class="wrapper">
  <div class="item">
    <div class="border left"></div>
    <div class="text">Пример контента</div>
    <div class="border right"></div>
  </div>
  <div class="item">
    <div class="border left"></div>
    <div class="text">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.</div>
    <div class="border right"></div>
  </div>
  <div class="item">
    <div class="border left"></div>
    <div class="text">Здесь что-то написано</div>
    <div class="border right"></div>
  </div>
</div>

    • 6

  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;
}
    <div class="b">
  <div class="b-trapezoid">
    <div class="b-trapezoid-content">
      <div class="b-trapezoid-content-item">
        <div class="b-trapezoid-content-text">
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="b-trapezoid">
    <div class="b-trapezoid-content">
      <div class="b-trapezoid-content-item">
        <div class="b-trapezoid-content-text">
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="b-trapezoid">
    <div class="b-trapezoid-content">
      <div class="b-trapezoid-content-item">
        <div class="b-trapezoid-content-text">
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="b-trapezoid">
    <div class="b-trapezoid-content">
      <div class="b-trapezoid-content-item">
        <div class="b-trapezoid-content-text">
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="b-trapezoid">
    <div class="b-trapezoid-content">
      <div class="b-trapezoid-content-item">
        <div class="b-trapezoid-content-text">
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
          <p>Как добиться эффекта сложенного гармошкой листа с помощью CSS?</p>
        </div>
      </div>
    </div>
  </div>
</div>

    • 5

相关问题