Заливка скошеных углов

#javascript #html #css

Есть 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;
}

    

      

      
    
    

      

    




    

Ответы

Ответ 1

Вариант с 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;
}

    
      
    




Ответ 2

но есть ли варики без них ?


Да возможны.



.block1{
	display:table-cell;	
	border-bottom: 100px solid red;
	border-left: 50px solid red;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;	
}
.block2{
	display:table-cell;
	position:relative;
	border-bottom: 100px solid blue;
	border-right: 50px solid transparent;
	border-left: 50px solid blue;
	height: 0;
	width: 100px;
	left:-50px;
	transform:rotate(180deg);	
	z-index:2;
}