纯CSS 绘制三角形气泡框

蚂蚁兄弟

浏览: 47875 次
性别:
来自: 上海

最近访客更多访客>>

qq113220715

工笔画年华

vfplt

七里奇异

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

结果：