巧用css+特殊字符，实现三角形效果

最新推荐文章于 2025-03-10 17:30:39 发布

转载最新推荐文章于 2025-03-10 17:30:39 发布 · 1.6k 阅读

jsp/html 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用CSS样式实现一个底部带有90度尖角的对话框的方法，包括样式代码和实际效果展示。

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

<html>
<head>
  <style>
   .org_box{
    height:80px;
    line-height:80px;
    margin-top:30px;
    padding-left:2em;
    background:#F3961C;
    position:relative;
   }
   .org_bot_cor_2{
    height:30px;
    line-height:0;
    font-size:60px;
    color:#f3961c;
    position:absolute;
    left:50%;
    top:3px;
   }
  </style>
</head>
<body>
  <div class="org_box">
   <span class="org_bot_cor_2">◆</span>
   字符法实现底部90度尖角对话框
  </div>
</body>
</html>

效果如下：

<html>
<head>
  <style>
   .org_box{
    height:80px;
    line-height:80px;
    margin-bottom:30px;
    padding-left:2em;
    background:#F3961C;
    position:relative;
   }
   .org_bot_cor_2{
    height:30px;
    line-height:0;
    font-size:60px;
    color:#f3961c;
    position:absolute;
    left:60px;
    bottom:-25px;
   }
  </style>
</head>
<body>
  <div class="org_box">
   <span class="org_bot_cor_2">◆</span>
   字符法实现底部90度尖角对话框
  </div>
</body>
</html>