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

demo

<div class='border-up'>
   <span></span>
</div>

<div class="popup">
   <span><em></em></span>
   XXXXXX
</div>

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中