我创建一个三角形:
&--triangle {
position: absolute;
top: 40px;
left: 25%;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 50px solid $color-white;
z-index: 999;
}
我创建一个弹出窗口:
&--modal {
width: 200%;
@include flexCenter(column);
min-height: 100px;
position: absolute;
top: 70px;
right: 0;
background-color: $color-white;
padding-top: 10px;
z-index: 998;
box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
}
但我需要一个边框和一个阴影在窗口周围。
1条答案
按热度按时间jk9hmnmh1#
我可以描述一下我在弹出窗口上创建一个箭头错觉的想法。我们可以将箭头绘制为一个单独的正方形,它可以旋转并放置在弹出窗口上以创建所需的效果。它应该精确地放置在弹出窗口上以覆盖弹出窗口的部分边框。确保弹出窗口的内容出现在此箭头上非常重要。由于箭头是一个单独的元素,我们可以添加边框和阴影。虽然可以添加边框没有任何问题,添加阴影箭头将导致它重叠弹出窗口。要解决这个问题,我们可以添加阴影作为一个单独的元素放置在弹出窗口后面。Example of my explanation