如何解决HTML中的Muller Lyer
我正在尝试在HTML中制作Muller-Lyer illusion的版本(没有图像文件,因为我想使行长可变)。
这是我到目前为止所拥有的;它具有正确的元素,但无法正常工作。最好的方法是什么?
.arrow {
border: solid black;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 40px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line-container {
display: flex;
width: 100%;
margin: 20px auto;
align-items: center;
}
.line {
flex-grow: 1;
height: 2px;
background: black;
position: relative;
}
.line.arrow-right:after {
position: absolute;
content: '';
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
.line.arrow-left:after {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
label {
margin: 0 15px;
}
<i class="arrow right"></i><div class="line-container"><span class="line arrow-left"></span><span class="line arrow-right"></span>
</div><i class="arrow left"></i>
解决方法
我使用了您的基本cde并试图简化一点。 看看这个codepen。是您要找的东西吗? 使用旋转边框的“弱点”是箭头的长度比容器div长,这就是我添加一些边距的原因。 最好的解决方案可能是使用SVG lines。
.line-container {
margin: 80px;
width: 400px;
height: 100px;
position: relative;
}
.arrow {
position: absolute;
border: solid black;
border-width: 0 8px 8px 0;
height: 100px;
width: 100px;
}
.right.out {
right: 16px;
}
.left.out {
left: 16px;
}
.right.in {
left: -120px;
}
.left.in {
right: -120px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line {
width: 100%;
border-top: 8px solid black;
position: absolute;
top: 50%;
left: 0;
}
<div class="line-container">
<i class="arrow right in"></i>
<div class="line"></div>
<i class="arrow left in"></i>
</div>
<div class="line-container">
<i class="arrow left out"></i>
<div class="line"></div>
<i class="arrow right out"></i>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。