我需要在我的卡片两边剪下三 Angular 形,在悬停时有阴影和效果
This这是我已经尝试过的
&__left-cut {
box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.15);
border: 1px solid transparent;
border-radius: 2px;
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
margin-top: -6px;
margin-left: -7px;
background-color: $bg-color;
transform: rotate(45deg);
transition: border .5s;
&::before {
content: '';
position: absolute;
display: block;
width: 12px;
height: 12px;
transform: translate(-4px, -4px);
left: 0;
top: 50%;
background-color: $bg-color;
}
}
我必须得到这个结果 expected result 我的影子看起来不太好。
最佳答案
这样好看吗?
&__left-cut {
box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0 3px 0 0;
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
margin-top: -6px;
margin-left: -8px;
padding-top: 1px;
padding-left: 1px;
background-color: $bg-color;
transform: rotate(45deg);
transition: border 0.5s;
&::before {
content: "";
position: absolute;
display: block;
width: 14px;
height: 14px;
left: 0;
top: 50%;
margin-left: -3px;
margin-top: -4px;
background-color: $bg-color;
}
}
&__right-cut {
box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 3px 0 0 0;
position: absolute;
width: 12px;
height: 12px;
right: 0;
top: 50%;
margin-top: -6px;
margin-right: -8px;
padding-top: 1px;
padding-right: 1px;
background-color: $bg-color;
transform: rotate(-45deg);
transition: border 0.5s;
&::before {
content: "";
position: absolute;
display: block;
width: 14px;
height: 14px;
right: 0;
top: 50%;
margin-right: -3px;
margin-top: -4px;
background-color: $bg-color;
}
}
关于javascript - 你怎么能用阴影从div中切出一个三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58663763/