.makibishi
span.shadow
View Compiled
body{
margin:3rem;
}
.makibishi{
width:200px;
height:200px;
clip-path: polygon(50% 0%, 40% 60%, 0% 100%, 50% 72%, 100% 100%, 70% calc(70% - 2px), 100% 62%, 60% 60%);
background-color: #3e3e3e;
position: relative;
// shadow
&:after{
content: '';
display: block;
position: absolute;
bottom: -4px;
right: 0px;
width: 116px;
height: 2px;
background-color: #6e6e6e;
transform-origin: right bottom;
align-content: center;
transform: rotate(46deg);
}
// shadow
.shadow{
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin:auto;
width:2px;
height:72%;
background-color: #6e6e6e;
&:after{
content: '';
position: absolute;
display: block;
left:100%;
bottom: 0;
width: 40px;
height: 2px;
background-color: #6e6e6e;
transform: rotate(-48deg);
transform-origin: left bottom;
background-color: #1c1c1c;
}
&:before{
content: '';
position: absolute;
display: block;
right:100%;
bottom: 0;
width: 40px;
height: 2px;
background-color: #6e6e6e;
transform: rotate(48deg);
transform-origin: right bottom;
background-color: #1c1c1c;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.