纯CSS 绘制三角形气泡框

AlisaClass 2014-04-23

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>

 结果:
纯CSS 绘制三角形气泡框
 (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>

 

纯CSS 绘制三角形气泡框
 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>

 结果:
纯CSS 绘制三角形气泡框
 
 

相关推荐

startXUEBA / 0评论 2016-05-30