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

#html #css #media_queries

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


    

Ответы

Ответ 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%
}

  

    

      
Агротехника
    
  
  

    

      
Легковой
транспорт
    
  
  

    

      
Грузоперевозки
    
  
  

    

      
Спецтехника
    
  
  

    

      
ЖД транспорт
    
  



Ответ 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;
}

Click me



Ответ 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;
}





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


Ответ 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;
}

  
Hello
  
World
  
How's
  
it
  
going?



Ответ 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
}



  
abc
  



  
abc
  

  

  
abc
  


  
abc
  



  
abc
  


  
abc
  



  
abc
  


  
abc