Возможно ли так сделать?
186
04 октября 2018, 05:20
Возможно ли сделать такие границы у блоков без использования фоновых картинок?
Answer 1
Блок, подобный черному, точно можно, например, при помощи clip-path.
А можно использовать псевдоэлементы :before и :after
.block {
width: 250px;
height: 150px;
}
.wrap {
width:500px;
background-color: grey;
position: relative;
background-color: #333;
margin: 60px;
}
/* верхний скос */
.wrap::before {
content: "";
position: absolute;
display: block;
border-top: 45px solid transparent;
border-left: 500px solid #333;
top: -45px;
}
/* нижний скос */
.wrap::after {
content: "";
position: absolute;
display: block;
border-bottom: 15px solid transparent;
border-right: 500px solid #333;
bottom: -15px;
}<div class="wrap">
<div class="block"></div>
</div>Если нужен обычный параллелограмм, то можно и transform обойтись.
Answer 2
Можно решить через градиенты linear-gradient()
.block {
width: 250px;
height: 150px;
}
.wrap {
width:500px;
background-color: grey;
position: relative;
background-color: #333;
margin: 60px;
}
/* верхний скос */
.wrap::before {
content: "";
position: absolute;
display: block;
border-top: 45px solid transparent;
border-left: 500px solid #333;
top: -45px;
}
/* нижний скос */
.wrap::after {
content: "";
position: absolute;
display: block;
border-bottom: 15px solid transparent;
border-right: 500px solid #333;
bottom: -15px;
}<div class="wrap">
<div class="block"></div>
</div>
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
-
18:31
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 48058 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30577 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24013 visits
- Как через css изменить цвет png изображения? 10423 visits
- Blob video url download 10015 visits
- Php curl запрос через прокси с авторизацией 9291 visits
- Работа с captcha vk api 8157 visits
© "hostciti.net" 18.4.2025 | 06:47