我试图在屏幕中间获得一条斜线，当您将鼠标悬停在某个部分时，它应该会增长(我猜我会知道如何制作(。
问题是将斜线放在屏幕中央并使其响应。
这是我当前的代码：
https://jsfiddle.net/kh657fL2/
.HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS slicing!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="block block-red">
Demo
</div>
<div class="block block-green">
Demo
</div>
<script src="ui.js"></script>
</body>
</html>
.CSS
html, body {
margin: 0;
padding: 0;
height:100%;
width:100%;
overflow:hidden;
}
.block {
height: 100vh;
width: calc(50% - 100px);
position: relative;
}
.block-red {
background-color:red;
float:left;
}
.block-green {
background-color:#00ff00;
float:right;
}
.block:after {
position: absolute;
top: 0px;
content:'';
height: 100%;
width: 200%;
background: inherit;
}
.block-red:after {
right: 0;
transform-origin: bottom right;
transform: skewX(-20deg);
z-index: -1;
}
.block-green:after {
left: 0;
transform-origin: top left;
transform: skewX(-20deg);
z-index: 2;
}
它看起来正确，但在移动设备上没有响应 - 颜色之间有一个空白区域，并且并不总是在屏幕中央。请帮忙！
看起来您需要计算窗口宽度的一半，减去大部分高度的 20%。
.CSS：
width: calc(50% - (90vh * 0.2));
然后，您只需要计算倾斜元素的宽度的两倍：
width: calc(100vw * 2);
奖励：您可以添加此jQuery来居中高而窄的窗口：
$(window).resize(function(){
var width = $(window).width();
var height = $(window).height();
var diff = ((width - (height * 0.37)) / 2);
if (width < (height * 0.37)) {
$('.block').css('left', - diff);
} else {
$('.block').css('left', '0');
}
});
工作示例： JSFiddle
更新：如果要在悬停时对宽度进行动画处理，可以使用CSS过渡来执行此操作。
transition: 1s ease-in-out;
悬停动画示例：JSFiddle