CSS 实现三角形对话框

最新推荐文章于 2023-10-24 17:41:19 发布

原创最新推荐文章于 2023-10-24 17:41:19 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

学习总结专栏收录该内容

47 篇文章

订阅专栏

<div style=" margin-top: 100px;width: 300px;height: 300px;position: relative;border: 1px solid #000000">
    <div style="width:0; height:0; border-width:30px; border-style:solid;
    border-color:transparent transparent #000 transparent;
    position: absolute;top: -60px;left: 100px;
    "></div>
    <em style="display: block;width:0; height:0; border-width:29px; border-style:solid;
    border-color:transparent transparent #fff transparent;position: absolute;top: -57px;left: 101px;"></em>
</div>

核心是一个三角形去拼接矩形框，另一个三角形去镂空，三角形通过 “ width:0; height:0; border-width:30px; border-style:solid;border-color:transparent transparent #000 transparent” 实现。