如何在CSS中创建一个带尾巴的模态窗口?

332nm8kg  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(134)

我创建一个三角形:

&--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);        
        }
    }

但我需要一个边框和一个阴影在窗口周围。

jk9hmnmh

jk9hmnmh1#

我可以描述一下我在弹出窗口上创建一个箭头错觉的想法。我们可以将箭头绘制为一个单独的正方形,它可以旋转并放置在弹出窗口上以创建所需的效果。它应该精确地放置在弹出窗口上以覆盖弹出窗口的部分边框。确保弹出窗口的内容出现在此箭头上非常重要。由于箭头是一个单独的元素,我们可以添加边框和阴影。虽然可以添加边框没有任何问题,添加阴影箭头将导致它重叠弹出窗口。要解决这个问题,我们可以添加阴影作为一个单独的元素放置在弹出窗口后面。Example of my explanation

相关问题