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

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

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

причудливые коробки с рамкой

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

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


html css css-shapes skew
person Michelle    schedule 02.10.2013    source источник
comment
Интересный вопрос.. Я не знаю, использовать ли мне rotate или skew   -  person Josh Crozier    schedule 03.10.2013
comment
Меня очень интересует этот вопрос - хороший вопрос   -  person Sterling Archer    schedule 03.10.2013
comment
Вы можете перекосить div в одну сторону и перекосить текст назад на ту же величину.   -  person Paulie_D    schedule 03.10.2013
comment
@Paulie_D Это сработало бы, только если бы они не были нерегулярными. Мне нужен не параллелограмм, а неправильная трапеция.   -  person Michelle    schedule 03.10.2013
comment
связанные: stackoverflow.com/q/52455594/8620333   -  person Temani Afif    schedule 03.02.2021

Ответы (2)


arrow_upward
31
arrow_downward

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

введите здесь описание изображения

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>

Полноэкранная демонстрация ---- демонстрация jsFiddle

person Josh Crozier    schedule 02.10.2013
comment
Это работает очень хорошо. Зеленая коробка работает ОТЛИЧНО, но желтая и красная имеют большие проблемы с маленькими размерами. Вот так: s16.postimg.org/42gvtkggl/Capture.png - person Michelle; 03.10.2013

arrow_upward
3
arrow_downward

Также вы можете использовать «clip-path» и установить любую форму, которая вам нужна. P.S. JS предназначен только для преобразования каждые 2 секунды.

var wrapper = document.querySelector(".wrapper");
var textBlock = document.querySelector(".text-block");

function gRI(max) { // getRandomInt
  return Math.floor(Math.random() * Math.floor(max));
}

setInterval(function(){

	// new color
  
  let newColor = "rgb(" + gRI(255) + "," + gRI(255) + "," + gRI(255) +")";
	
	wrapper.style["background-color"] = newColor;
  
  // new shape
  
  let newShape = 
  "polygon(" +
  gRI(40) + "px " + gRI(40) + "px, " + // top left
	gRI(40) + "px " + "calc(100% - " + gRI(40) + "px), " +  // top right
  "calc(100% - " + gRI(40) + "px) " + "calc(100% - " + gRI(40) + "px), " +
  "calc(100% - " + gRI(40) + "px) " + gRI(40) + "px " +
  ")";
  
  textBlock.innerHTML = "clip-path: " + newShape +
  											" <br><br> background-color: " + newColor;
  
  wrapper.style["clip-path"] = newShape;
}, 2000)
.wrapper{
  box-sizing: border-box;

  width: 90%;
  min-width: 200px;
  
  margin: 25px auto;
  padding: 50px;
  
  background-color: lightgray;
  
  transition: 0.5s;
  
  clip-path: polygon( 25px 25px, 25px calc(100% - 25px), calc(100% - 25px) calc(100% - 25px), calc(100% - 25px) 25px );
}

.text-block{
  width: 100%;
}
<div class="wrapper">
  <div class="text-block">Changes every 2 seconds...</div>
</div>

person Daniel Priest    schedule 21.07.2018