如何解决消除伪元素:before中的空白
我正在尝试使用label元素创建一个具有鼠标悬停效果的下拉菜单。 当标签箭头形状在菜单图像上滑动时,它会出现意外间隙。
.mask {
width: 100%;
height: 100%;
position: absolute;
transform: translateX(-120%);
top: 0;
background-color: rgba(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,0.8) 51%) no-repeat top left/30% 50%,linear-gradient(to top left,0.8) 51%) no-repeat bottom left/30% 50%;
}
我希望这对某人有帮助。
解决方法
使用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,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,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">
<a href="#"></a>
</li>
<li class="testmenu01-li-02">
<a href="#"></a>
</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。