css三角形和气泡

最新推荐文章于 2025-10-24 11:24:05 发布

原创最新推荐文章于 2025-10-24 11:24:05 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS创建不同方向的三角形，并应用于气泡提示框的设计中，通过调整border-width和border-color实现各种样式。

部署运行你感兴趣的模型镜像

css

.border-up{
           position: relative;
           width: 0;
           height: 0;
           /*向上*/
           /*border-width: 0 30px 30px;*/
           /*向下*/
           /*border-width: 30px 30px 0;*/
           /*向左*/
           /*border-width: 30px 30px 30px 0;*/
           /*向右*/
           border-width: 30px 0 30px 30px;
           border-style: solid;
           /*向上*/
           /*border-color: transparent transparent #333; */
           /*向下*/
           /*border-color: #333 transparent transparent ;*/
           /*向左*/
           /*border-color: transparent #333 transparent transparent;*/
           /*向右*/
           border-color: transparent transparent transparent #333;
           margin: 48px auto;
           /* 全透明黑色 border-color*/
       }
       .border-up span{
           display: block;
           width: 0;
           height: 0;
           /*向上*/
           /*border-width: 0 28px 28px;*/
           /*向下*/
           /*border-width: 30px 30px 0;*/
           /*向左*/
           /*border-width: 30px 30px 30px 0;*/
           /*向右*/
           border-width: 30px 0 30px 30px;
           border-style: solid;
           border-color: transparent transparent #ff0;
           position: absolute;
           top: 0;
           left: -28px;
       }
       .popup{
           position: relative;
           width: 200px;
           height: 50px;
           background: #f08;
           margin: 300px auto;
       }
       .popup span{
           border-width: 0 30px 30px;
           border-color: transparent transparent #f08;
           position: absolute;
           top: -30px;
           width: 0;
           height: 0;
           border-style: solid;
           display: block;
       }