Может ли CSS создать разноцветную трапецию?

Question

Я смотрю на обновление веб-сайта 2005 года, который использует два изображения для создания верхнего и нижнего фрейма страницы. Изображения представляют собой простую двухцветную трапециевидную форму с рамкой, нарисованной вокруг каждой цветной области. Нижнее изображение идентично верхнему, оно просто перевернуто вверх ногами.

Я знаю, как создать трапецию, используя границы CSS, например:

#trapezoid {
    border-bottom: 100px solid #889cb0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div id="trapezoid"></div>

и моделируйте границы, используя свойство outline, но как вы сложите фигуры и создадите у них вид единого изображения? Или есть способ создать картинку без укладки отдельных фигур?

Вот что я хочу:

Answer 1

CSS подход: трансформация и градиент

Вы можете получить форму с помощью tranksform: perspective и linear-gradient. Градиент также может создать линию в середине. Для внешней линии просто используйте рамку и отрегулируйте ее ширину с четырех сторон в соответствии с вашими потребностями.

Вот рабочий пример:

.trapezoid {
  width: 500px;
  height: 50px;
  transform: perspective(5px) rotateX(1deg);
  margin: 50px;
  background: linear-gradient(to bottom, #889cb0, #889cb0 40%, #465b6c 40%, #465b6c 45%, #d8e0e8 45%);
  border-top: 3px solid #465b6c;
  border-bottom: 2px solid #465b6c;
  border-right: 4px solid #465b6c;
  border-left: 4px solid #465b6c;
}

.flipped {
  transform: perspective(5px) rotateX(-1deg);
  background: linear-gradient(to top, #889cb0, #889cb0 40%, #465b6c 40%, #465b6c 45%, #d8e0e8 45%);
  border-top-width: 2px;
  border-bottom-width: 3px;
}

<div class="trapezoid"></div>
<div class="trapezoid flipped"></div>

См. В браузере поддержку 3D-преобразований и линейных градиентов .

Подход SVG

Хотя вы просили CSS-решение, я настоятельно рекомендую использовать SVG для ваших фигур. Они семантически более правильны для вашего случая использования, масштабируемы, отзывчивы и предлагают лучшую поддержку браузера.

Вот рабочий пример:

.trapezoid {
  width: 604px;
  height: 54px;
}

.trapezoid polygon {
  stroke-width: 2;
  stroke: #465b6c
}

.trapezoid .top {
  fill: #889cb0;
}

.trapezoid .bottom {
  fill: #d8e0e8;
}

.trapezoid.flipped {
  margin-top: 30px;
  transform: rotate(180deg);
}

<svg viewbox="-2 -2 604 54" class="trapezoid">
  <polygon points="60,0 540,0 600,50 0,50" class="bottom" />
  <polygon points="60,0 540,0 564,20 36,20" class="top" />
</svg>

<svg viewbox="-2 -2 604 54" class="trapezoid flipped">
  <polygon points="60,0 540,0 600,50 0,50" class="bottom" />
  <polygon points="60,0 540,0 564,20 36,20" class="top" />
</svg>

См. Поддержку браузера для SVG .

Answer 2

Конечно. Вы можете использовать свойство clip-path.

---

.top {
	  clip-path: polygon(3.5% 0%, 96.5% 0%, 100% 100%, 0% 100%);
	  -webkit-clip-path: polygon(3.5% 0%, 96.5% 0%, 100% 100%, 0% 100%);
	  background-color: #889cb0;
	  width: 360px;
	  height: 20px;
	  margin-left: 20px;
	}

	.bottom {
	  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
	  -webkit-clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
	  background-color: #d8e0e8;
	  width: 400px;
	  height: 30px;
	}

<div class="top">
</div>
<div class="bottom">
</div>

---

Здесь также есть Codepen , так что вы можете поиграться со значениями и понять, как это работает.