Как сделать пару кривых блоков CSS?
221
27 июля 2018, 04:00
Появилась следующая проблема: требуется сделать такую конструкцию ( рисунок приложен ), а я не могу понять, как это можно сделать. Помогите, пожалуйста.
UPD: Возможно, не совсем правильно изложил суть вопроса. На рисунке показан не градиент, а два разных блока, между которыми имеется расстояние
Answer 1
Можно с помощью linear-gradient:
div {
width: 300px;
height: 200px;
border: 1px solid red;
background: linear-gradient(65deg, blue 35%, white 0, white 50%, grey 0);
}<div>
</div>Answer 2
Есть вариант решения с использованием skewX
.skew {
padding: 20px;
margin: 0 5px;
width: 100px;
color: white;
background-color: #F48024;
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-ms-transform: skewX(15deg);
-o-transform: skewX(15deg);
transform: skewX(15deg);
}
.container {
display: flex;
}<div class="container">
<div class="skew"></div>
<div class="skew"></div>
</div>Answer 3
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:600px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape .wrapper {
display:block;
float:left;
margin:50px auto 200px;
width:100%;
padding:0 5%;
transform:skew(0deg,-5deg);
-ms-transform:skew(0deg,-10deg);
-webkit-transform:skew(0deg,-5deg);
}
.product {
float:left;
width:29%;
min-height:200px;
background:blue;
margin:2%;
transform:skew(0deg,-5deg);
-ms-transform:skew(0deg,-10deg); /* IE 9 */
-webkit-transform:skew(0deg,0deg); /* Safari and Chrome */
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform:skew(0deg,5deg); /* Safari and Chrome */
}
.footer {
z-index:2;
margin-top:-4em;
position:relative;
width:100%;
display:block;
float:left;
}
.footer .wrapper {
height:150px;
background:green;
}<div class="headerimage">
</div>
<div id="backshape">
<div class="wrapper">
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
</div>
</div>
<div class="footer">
<div class="wrapper"></div>
</div>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30491 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9953 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
![Почему DOMParser не парсит DOM-структуру? [закрыт]](https://hostciti.net/images/nophoto.png "Почему DOMParser не парсит DOM-структуру? [закрыт]")
© "hostciti.net" 17.11.2024 | 01:52