利用css实现小三角形教程

立即领取

最高 ¥2000 红包 限量领取

云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

经常在网站上看到那种小三角形的样式,白露也没有去仔细研究那种网站上小三角形样式的实现原理,今天有时间,就一起来探究一下吧!

制作小三角形的原理

建立一个盒子,然后利用盒子的边框填充颜色,就可以得到小三角形。下面是分解三角形的最初模型,这样拿到三角形之后只需要设置以下样式就得到了。

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

如果给盒子设定宽和高,会出现什么呢?

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

看边框变成梯形了,是不是很有趣呢~ 好了,跑题了,还是说说利用css实现小三角形这个主题,其实,做成这样基本已经完成了。接下来,我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么。

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;//IE6下边框透明
    border-width:20px;
}

ok,已经做出小三角形了,但是还不是我们网站上看到的效果,如下图这种要怎么做呢?

简单!下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框,然后把小三角定位到矩形框上。先来写出HTML结构:

<div class="tag">
      <em></em>    
      CSS气泡框实现
</div>
.tag{
 width:300px; 
 height:100px; 
border:5px solid #09F;
 position:relative;}
.tag em{
display:block;
 border-width:20px;
 position:absolute; 
bottom:-40px;
 left:100px;
border-style:solid dashed dashed; 
border-color:#09F transparent transparent;
font-size:0; 
line-height:0;
}

效果如下:

现在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:

<div class="tag">
      <em></em>    
      <span></span>
      CSS气泡框实现
</div>
.tag{ 
width:300px;
 height:100px; 
border:5px solid #09F;
 position:relative; 
background-color:#FFF;
}
.tag em{
display:block;
 border-width:20px;
 position:absolute;
 bottom:-40px;
 left:100px;
border-style:solid dashed dashed; 
border-color:#09F transparent transparent;
font-size:0; 
line-height:0;
}
.tag span{
display:block; 
border-width:20px; 
position:absolute; 
bottom:-33px; 
left:100px;
border-style:solid dashed dashed;
 border-color:#FFF transparent transparent;
font-size:0; 
line-height:0;
}

最终效果:

补充:以上方式实现小三角的过程中不可避免的增加了多余的标签,如果不要求所有浏览器中显示一致的话, 我们可以利用css3给这个class用伪类设置来实现这个小三角。

结构代码:

<div class="tag">
    css3气泡框
</div>
.tag{ 
    width:300px;
    height:100px;
    border:5px solid #09F; 
    position:relative;
    background-color:#FFF;
} 
.tag:before,.tag:after{
    content:"";display:block; 
    border-width:20px; 
    position:absolute; bottom:-40px;
    left:100px;
    border-style:solid dashed dashed;
    border-color:#09F transparent transparent;
    font-size:0; 
    line-height:0;
}
.tag:after{
    bottom:-33px;
    border-color:#FFF transparent transparent;
}

效果和上面的是一样的,这样就简单的拿到了对话框似的小三角形了!!!

赞 (6) 打赏
  • 欢迎小伙伴加入,本站原创文章交流群:进站必看
  • 本作品是由 白露博客 会员 白露 投递的作品。
  • 网络媒体或个人转载请务必署名并注明出处和链接!:http://blmoe.cn/597.html
  • 凡是原创作品,禁止再次修改后发布;任何商业用途均须联系作者。如未经授权用作他处,作者将保留追究侵权者法律责任的权利。

评论 0

收起表情
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

「赠人玫瑰,手留余香」

支付宝扫一扫打赏

微信扫一扫打赏