Как изменить вид блока div? [дубликат]

154

28 сентября 2018, 15:50

На данный вопрос уже ответили:

Возможно ли так сделать? 2 ответа

хочу спросить совета, как сверстать данный блок? вырезав данную картинку из photoshop или же с помощью css этот блок изменить а если с помощью css то как это реализовать?

Answer 1

*, 
*:after, 
*:before { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  padding: 0; 
  margin: 0; 
  outline: 0 
} 
 
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ 
 
.box { 
  margin: 100px auto; 
  height: 200px; 
  width: 400px; 
  background: gray; 
  -webkit-transform: skewY(-10deg); 
  -ms-transform: skewY(-10deg); 
  transform: skewY(-10deg) 
}

<div class="box"></div>

Answer 2

Отличный вариант - через прозрачный border у псевдоэлементов. https://codepen.io/anon/pen/rrGgBY - пример

HTML:

 <div class="wrapper">
    <div class="block"></div>
 </div>

CSS:

.wrapper {overflow: hidden;}
.block:before {
  content: '';
  transform: translateY(-100%); 
  display: block;
  border-bottom: 240px solid #333;
  border-right: 500px solid #333;
  border-left: 3000px solid transparent;
}