<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:800px;
height:200px;
padding:40px 20px;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
margin: 100px auto;
transition: ease-in.9s;
background: linear-gradient(0, #043500, #043500 )no-repeat,
linear-gradient(0, #043500, #043500)no-repeat,
linear-gradient(0, #043500, #043500)no-repeat,
linear-gradient(0, #043500, #043500)no-repeat;
background-size: 0 1px, 1px 0, 0 1px, 1px 0;
background-position: left top, right top, right bottom, left bottom;
position:relative;
}
div:hover {
box-shadow: 0 2px 8px rgb(4 5 30 /32%), 0 0 6px rgb(0 0 0 /4%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}
div::before {
content:"";
position:absolute;
top:0;
right:0;
background:linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0,.2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
width:1.73em;
height:3em;
transform:translateY(-1.3em)rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius:0.5em;
box-shadow: -0.2em 0.2em 0.3em -0.1em rgb(0 0 0 / 15%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>