<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div {
width: 200px;
height: 100px;
margin: 100px;
padding: 20px;
position: relative;
border-radius: 1rem;
background: green;
z-index: 1;
overflow: hidden;
transform: rotate(0deg)
}
.box{
width: 3em;
height: 3em;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
transition: all 1s;
transform: translate( 3em ,-4.3em) rotate(-30deg);
border-bottom-left-radius: inherit;
}
.angle {
width: 1.73em;
height: 3em;
border-bottom-left-radius: inherit;
box-shadow: -0.2em 0.2em 0.3em -0.1em #065206;
background: linear-gradient(240deg, #fff 50%, #138a18 0);
z-index: 100;
}
#div:hover .box {
transform:translate( .55em ,-1em) rotate(-30deg);
}
</style>
</head>
<body>
<div id="div">
<div class="box">
<div class="angle"></div>
</div>
</div>
</body>
</html>
使用圆角配合overflow hidden 边角会有一丝像素残留,没找到好的解决方法,希望能解决的朋友留言帮助一下,不使用圆角不会有像素残留
如果需求没有那么严格的可以看一下下面的方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div {
width: 200px;
height: 100px;
margin: 100px;
padding: 20px;
position: relative;
border-radius: 1rem;
background: green;
z-index: 1;
overflow: hidden;
}
.box{
width: 3em;
height: 3em;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
transition: all 1s;
transform: translate( 3em ,-4.3em) rotate(-30deg);
border-bottom-left-radius: inherit;
}
.angle {
width: 1.73em;
height: 3em;
border-bottom-left-radius: inherit;
box-shadow: -0.2em 0.2em 0.3em -0.1em #065206;
background: linear-gradient(240deg, #fff 50%, #138a18 0);
z-index: 100;
}
#div:hover .box {
transform:translate( .5em ,-1em) rotate(-30deg);
}
</style>
</head>
<body>
<div id="div">
<div class="box">
<div class="angle"></div>
</div>
</div>
</body>
</html>
操作边框宽度的方案,只是不能斜对角。