Есть 2 дива стоящих друг за другом, нужно сделать скошеную черту между ними посредине , и сделать так что бы при наведении заливалось другим дивом до все скошеную часть , а не за ее пределы. Как это можно сделать ?
Думаю можно сделать с js svg , но есть ли варики без них ?
.parent {
overflow: hidden;
width: 600px;
}
.hid {
display: none;
position: absolute;
top:0;
left:0;
width:100%;
height: 200px;
background: green;
}
.child {
float: left;
width: 50%;
height: 200px;
background: violet;
position: relative;
}
.child2 {
background: #000;
float: left;
width: 50%;
height: 200px;
position: relative;
}
.child:hover > .hid,
.child2:hover > .hid{
display: block;
}
Ответ
Вариант с clip-path
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.parent{
height: 100vh;
width: 100vw;
position: relative;
}
[class^=child-]{
height: 100%;
width: 100%;
position: absolute; top: 0;
}
.child-1{
left: 0;
background: green;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.child-2{
right: 0;
background: blue;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
[class^=child-]:hover{
opacity: .5;
}
Комментариев нет:
Отправить комментарий