Как сверстать скошеные углы у блоков?

110

17 ноября 2019, 15:40

Народ подскажите как сверстать блоки(div) с кошеными углами на полной версии сайта, а на планшетной блоки должны быть ровными + в каждом блоке разная картинка в качестве фона и она заполняет всю область блока.

Answer 1

Вот вариант более похожий на то, что в вопросе

body { 
  margin: 0; 
  overflow: hidden; 
} 
 
@media (min-width: 600px) { 
 
  .item { 
    transform: skewX(-15deg); 
  } 
   
  .content { 
    transform: skewX(15deg); 
  } 
   
  div.content h1 { 
    transform: rotate(-75deg); 
  } 
} 
 
.accordion { 
  display: flex; 
} 
 
.item { 
  flex: 1; 
  transition: 0.4s; 
  margin-left: -2px; 
  overflow: hidden; 
  display: flex; 
} 
 
.content div { 
 opacity: 0; 
  transition: 200ms; 
} 
 
div.item:hover, 
div.item:focus { 
  flex: 5; 
} 
 
div.item:hover h1, 
div.item:focus h1{ 
  opacity: 0; 
  transition: 100ms; 
} 
 
div.item:hover div, 
div.item:focus div{ 
  opacity: 1; 
  transition: 100ms; 
} 
 
.item:first-child { 
  border-left: 0; 
  flex: 1.25; 
  margin-left: -5em; 
  padding-left: 5em; 
} 
 
.item:last-child { 
  flex: 1.25; 
  margin-right: -5em; 
  padding-right: 5em; 
} 
 
.content { 
  padding: 4em; 
  background-position: 50% 50%; 
  background-size: cover; 
  margin: 0 -5em; 
  flex: 1; 
  display: flex; 
  justify-content: center; 
} 
 
.bg1 { 
  background-image: url("https://i.stack.imgur.com/gW9Md.png"); 
} 
 
.bg2 { 
  background-image: url("https://i.stack.imgur.com/gFeUb.png"); 
} 
 
h1 { 
  color: #fff; 
  font-size: 2em; 
  transform: rotate(-90deg); 
  font-family: monospace; 
  text-align: center; 
  line-height: 1; 
  justify-content: center; 
} 
 
.text { 
  top:0; 
  left:0; 
  width:100%; 
  height:100% 
}

<section class="accordion"> 
  <div class="item"> 
    <div class="content bg1"> 
      <h1>Агротехника</h1> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="content bg2"> 
      <h1>Легковой<br>транспорт</h1> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="content bg1"> 
      <h1>Грузоперевозки</h1> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="content bg2"> 
      <h1>Спецтехника</h1> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="content bg1"> 
      <h1>ЖД&nbsp;транспорт</h1> 
    </div> 
  </div> 
</section>

Answer 2

.button { transform: skewX(-45deg); } 
.button > div { transform: skewX(45deg); } 
 
.button { 
	display: inline-block; 
	padding: .5em 1em; 
	border: 0; margin: .5em; 
	background: #58a; 
	color: white; 
	text-transform: uppercase; 
	text-decoration: none; 
	font: bold 200%/1 sans-serif; 
}

<a href="yolo" class="button"> 
<div>Click me</div> 
</a>

Answer 3

Такой блок с скошенными бордерами, можно сделать с помощью clip-path, угол и сторону можно настраивать отдельно
Советую "поиграть с этим свойством" здесь, это поможет

#block { 
  width: 200px; 
  height: 400px; 
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 79% 100%, 0% 100%); 
  clip-path: polygon(25% 0%, 100% 0%, 79% 100%, 0% 100%); 
  background: red; 
}

<div id = 'block'></div>

UPD: Заранее извиняюсь за слабый пример кода

Answer 4

* { 
  padding: 0; 
  margin: 0; 
} 
 
.skew { 
  -webkit-transform: skewX(-15deg) translate(-50%, -50%); 
  -moz-transform: skewX(-15deg) translate(-50%, -50%); 
  -ms-transform: skewX(-15deg) translate(-50%, -50%); 
  -o-transform: skewX(-15deg) translate(-50%, -50%); 
  transform: skewX(-15deg) translate(-50%, -50%); 
  background-color: blue; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 250px; 
}

<div class="skew"> 
  <p>Hello</p> 
  <p>World</p> 
  <p>How's</p> 
  <p>it</p> 
  <p>going?</p> 
</div>

Answer 5

В этом примере skew включается медиа запросом на ширину экрана

$('.info').first().show().animate({ 
  width: '40%' 
}); 
$('.item').click(function() { 
  $(this) 
    .next().show().animate({ 
      width: '40%' 
    }) 
    .siblings(".info").animate({ 
      width: 0 
    }); 
});

body { 
  overflow: hidden; 
  margin: 0; 
} 
 
@media (min-width: 600px) { 
  .info, .item { 
    transform: skewX(-15deg); 
  } 
  .content { 
    transform: skewX(15deg); 
  } 
} 
 
section { 
  margin-left:50px; 
  text-align:center 
} 
 
.info, .item { 
  height: 150px; 
  float: left; 
} 
 
.item { 
  width: 60px; 
  float:left; 
  background-color: #19B5FE; 
  cursor: pointer; 
} 
 
.info { 
  background-color:#003171; 
  width: 0; 
  display: none; 
  color: #fff 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<section> 
<div class="item"> 
  <div class='content'>abc</div>   
</div> 
 
<div class="info"> 
  <div class='content'>abc</div>   
</div> 
   
<div class="item"> 
  <div class='content'>abc</div>   
</div> 
<div class="info"> 
  <div class='content'>abc</div>   
</div> 
 
<div class="item"> 
  <div class='content'>abc</div>   
</div> 
<div class="info"> 
  <div class='content'>abc</div>   
</div> 
 
<div class="item"> 
  <div class='content'>abc</div>   
</div> 
<div class="info"> 
  <div class='content'>abc</div>   
</div> 
 
 
 
</section>