<style>
/* 刀面 */
.box {
margin: 100px auto 0;
width: 400px;
height: 100px;
border-radius: 0px 0px 0px 200px / 0px 0px 0px 100px;
background:linear-gradient(185deg, black,black, silver, transparent,lightgray);
position: relative;
opacity: 0.8;
box-shadow: 1px 1px 2px #aaa;
transform: rotate(-15deg);
}
/* 刀柄部分 */
.box::before, .box::after {
content: '';
box-shadow: 1px 1px 10px #eee inset;
position: absolute;
}
/* 刀柄 */
.box::before {
background: tan;
width: 140px;
height: 30px;
right:-140px;
bottom: calc(50% - 15px);
border-radius: 0 20px 20px 0 / 0 40px 40px 0;
background: black;
}
/* 刀柄和刀身之间 */
.box::after {
width: 10px;
height: 102px;
border-radius: 2px;
background:gray;
right:0px;
bottom: -1px;
}
</style>
<div class="box"></div>
|