Removing gap in :before :after pseudo elements - html

Question

I'm trying to make a dropdown menu with mouse hover effects, using the label element.
When tag arrow shape slides on the menu image, it has an unexpected gap.
.mask {
width: 100%;
height: 100%;
position: absolute;
transform: translateX(-120%);
top: 0;
background-color: rgba(255,255,255,0.8);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
display: flex;
justify-content: flex-end;
align-items: center;
}
.mask:before {
content: "";
position: absolute;
top: 0%;
left: 100%;
margin-top: 0px;
width: 20%;
height: 100%;
background:
linear-gradient(to bottom left, transparent 50%, rgba(255,255,255,0.8) 51%) no-repeat top left/30% 50%,
linear-gradient(to top left, transparent 50%, rgba(255,255,255,0.8) 51%) no-repeat bottom left/30% 50%;
}
jsfiddle
I hope this helps someone.

Answer 1

Do it differently using clip-path
.testmenu {
max-width: 100%;
margin-bottom: 2vh;
}
.testmenu a {
display: block;
text-decoration: none;
color: transparent;
padding-top: calc(100%*168/1218);
}
label {
display: block;
margin: 0;
line-height: 1;
color: #fff0;
cursor: pointer;
width: 100%;
padding-top: calc(100%*200/1218);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
label[for="testmenu_bar01"] {
background-image: url(https://placehold.jp/1218x218.png);
}
input {
display: none;
}
.testmenu ul {
margin: 0;
padding: 0;
background: #f4f4f4;
list-style: none;
}
.testmenu li {
height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background-size: contain;
}
.testmenu li.testmenu01-li-01 {
background-image: url("https://placehold.jp/1218x168.png");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
.testmenu li.testmenu01-li-02 {
background-image: url("https://placehold.jp/1218x168.png");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
}
#testmenu_bar01:checked~#links01 li {
height: 0;
padding-bottom: calc(100%*168/1218);
opacity: 1;
}
#testmenu_bar01:checked+#links01 li.testmenu01-li-01 {
margin-top: 2vh;
}
.sizing-mask {
position: relative;
overflow: hidden;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
transform: translateX(-120%);
top: 0;
background-color: rgba(255, 255, 255, 0.8);
transition: all 0.6s ease;
display: flex;
justify-content: flex-end;
align-items: center;
clip-path:polygon(0 0,90% 0%, 100% 50%, 90% 100%,0% 100%);
}
.mask:after {
content: "";
width: 10%;
height: 100%;
}
.testmenu:hover .mask {
transform: translateX(-61%);
border-right: hidden;
}
<div id="onlineshop" class="testmenu">
<div class="sizing-mask">
<div class="mask">
<div class="test-caption">
<p style="color: rgba(0,0,0,1);font-size: 1vw;text-transform: inherit;letter-spacing: 1px;" class="eihe-title">text<span class="break"></span>text</p>
</div>
</div>
<label for="testmenu_bar01"></label>
</div>
<input type="checkbox" id="testmenu_bar01" class="accordion">
<ul id="links01">
<li class="testmenu01-li-01">
</li>
<li class="testmenu01-li-02">
</li>
</ul>
</div>