Подтвердить что ты не робот

Скошенные границы на Div

Я пытаюсь перекосить div, похожий на это: Наклоните верх div с помощью css без перекоса текста или это: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Вот изображение того, что я пытаюсь сделать:

funky bordered boxes

В принципе, мне нужно наклонить границы странными способами на всех 4 сторонах. Я могу сделать это с помощью фоновых изображений, но я бы предпочел, чтобы сделать это в CSS, чтобы divs могли реагировать по ширине и высоте. Я бы хотел найти решение, которое работает в старых браузерах, но я понимаю, что не могу все!

Что было бы лучшим способом иметь наклонные границы на всех четырех сторонах? (Примечание: граница на нижней части зеленой коробки наклоняется вверх по середине и вниз снаружи, и мне НЕ нужны границы для этого, просто наклон в одном направлении хорош.)

4b9b3361

ОТВЕТЫ

Ответ 1

Мне удалось сделать что-то очень похожее.. он работает во всех современных браузерах.

enter image description here

HTML - довольно простой

div:nth-child(1) {
  background: rgb(122, 206, 122);
  height: 140px;
  transform: skew(-10deg) rotate(2deg);
  -webkit-transform: skew(-10deg) rotate(2deg);
  -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
  transform: skew(10deg) rotate(-2deg);
  -webkit-transform: skew(10deg) rotate(-2deg);
  -moz-transform: skew(10deg) rotate(-2deg);
  padding: 3% 2%;
}

div:nth-child(2) {
  border-bottom: 180px solid rgb(233, 233, 65);
  border-left: 8px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 60px;
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  padding: 3.5% 3%;
}

div:nth-child(3) {
  border-top: 140px solid rgb(253, 74, 74);
  border-left: 23px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 20px;
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  position: absolute;
  top: -140px;
  padding: 3% 3%;
}

div:nth-child(3):before {
  content: '';
  width: 124%;
  height: 80px;
  background: white;
  position: absolute;
  left: -20%;
  bottom: 120px;
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
}
<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>