css三角形和气泡

最新推荐文章于 2025-05-14 16:51:09 发布

大脸猫&蓝皮鼠

最新推荐文章于 2025-05-14 16:51:09 发布

阅读量329

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/duanran0/article/details/87806186

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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