`

纯CSS 绘制三角形气泡框

    博客分类:
  • css
阅读更多

1.用纯css绘制带三角型的气泡框,不适合用图片

2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分。

例子:先画一个三角吧

.dr{
 width:0px;
height:0px;
border:10px solid black;
border-bottom:10px solid red;
}
<div class=dr></div>

 结果:

 (1)当我们想要绘制朝上着上方的小三角,只要把黑色区域改为白色或透明即可。border:10px solid transparent 或:border:10px solid #fff

    (2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top

3.我们已经绘画了三角型,但是我们要的是三角形边框,改怎么做呢?

思路:外边是一个实的三角形,用上面的方法绘制,里面在做一个小三角形叠在里面,颜色是白色,比外面的三角形小一点点,这样不就留下框了么。

 <style>
     .content{
          width:0px;
          height:0px;
          border:10px solid black;
          border-bottom:10px solid red;
     }
    .inner{
          width:0px;
          height:0px;
          border:10px solid yellow;
          border-bottom:10px solid red;
    }
     </style>
</head>
<body>
        <div class="content">
             <div class="inner">
             </div>
        </div>
</body>

 


 4.经过大神的点播,利用:before和after 来实现这个更方便些

  <style>
     .content{
           width:0px;
           height:0px;
           border:10px solid transparent;
           border-bottom:10px solid red;
           margin-left:10px;
     }
    .content:after{
          content:"";
          display:block;
          width:0px;
          height:0px;
          border:10px solid transparent;
          border-bottom:10px solid white;
          position:relative;
          top:-9px;
          left:-10px;
     }
     </style>

 结果:

 
 

 

  • 大小: 1.6 KB
  • 大小: 3.5 KB
  • 大小: 1.4 KB
分享到:
评论

相关推荐

    JS+CSS实现一个气泡提示框

    本文将分别从鼠标事件处理、纯CSS三角形制作这两个关键技术点,以及相关的HTML结构来介绍如何创建一个功能完整的气泡提示框。 首先,涉及到的JavaScript技术包括响应鼠标事件。这里主要使用了`mouseover`和`mouse...

    css实现带圆角三角型的示例代码

    最后,示例代码还展示了这些圆角三角形在网页中应用的实例,如在一个名为“bubble-box”的容器内部使用,其中“bubble-box-hat”类使用了向上的三角形来模拟气泡或者对话框的提示箭头。 综上所述,通过利用CSS的...

    [CSS] 用伪元素:after实现分割线和气泡

    总的来说,`:after`伪元素是CSS中一个强大且灵活的工具,它不仅限于创建分割线和气泡,还可以用于制作各种复杂的设计,如清除浮动、添加版权信息、构建自定义布局等。熟练掌握`:after`的使用,对于提升网页设计和...

    div+CSS制作类似微信对话气泡效果的实例总结

    实例中提到了三角形的绘制,这是一个常见的CSS技巧。通常,我们通过创建一个具有特定边框宽度和颜色的元素,然后隐藏不需要的边框,只显示形成三角形的边来实现。例如,`&lt;td class="lm"&gt;&lt;span&gt;&lt;/span&gt;&lt;/td&gt;`中的`...

    使用CSS绘制基础的对话框图案的代码示例

    总结一下,使用CSS绘制对话框中的三角形是通过巧妙利用边框的透明度和颜色来实现的。这种技术不仅可以创建出基本的箭头形状,还可以进一步扩展到更复杂的图形设计。熟练掌握这一技巧,可以提升网页设计的灵活性和...

    CSS Border高级使用实例分享(三角等形状)

    对于气泡框的创建,可以通过棱形字符(◆)来实现。这通常涉及到设置字符的font-size、颜色与背景色一致,并使用负的margin值以及绝对定位来实现其精确布局。 至于圆角生成,传统的办法是使用梯形来近似模拟出圆角...

Global site tag (gtag.js) - Google Analytics