zoukankan      html  css  js  c++  java
  • 剑走偏锋——用css制作一个三角形箭头

      通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的。那是不是有更好的办法呢,毕竟要用两张图片来解决这么一个小问题太浪费资源了,于是,下面我要用一个剑走偏锋的方法来解决这一问题,用到的只需css的一个属性,就是border-width

      我们先来看个样式,如果设置元素边框,会怎么样:

    test

      似乎看不出什么,让我给四个边框加上不同的颜色吧再看看吧:

    test

      是不是发现了些什么?对,让我们把中间的文字去掉吧:

     

      这样,就出现4个三角形了,然后我们如果需要顶部那个三角形,只需要将border的left、right、bottom设置成背景色就行了:

     

      这样,我们需要的三角形就出现了,并且可以设置4个不同方向的了:

        

      样式代码很简单,就几句话:

    <strong style="float:left; border-style:solid; border-10px; border-color:#000 #ccc #ccc #ccc; height:0; 0; font-size:0"></strong>
    

      东西很简单,但很想到用border边框来制作三角形箭头确实有点剑走偏锋了,用的相当巧妙。

      相关阅读:《CSS3 @font-face实现颜色大小可控的三角效果

           《告别图片—使用字符实现兼容性的圆角尖角效果beta版

      PS:因为园子里发的demo不能出现空标签,也就是我必须在<strong></strong>标签里加个空格,如:<strong>&nbspl;</strong>,但这就导致IE6下显示错误,其实是可以的,大家试试就知道了。

  • 相关阅读:
    html 问题
    bookshelf
    requireJS 用法
    autoprefixer
    移动端 代码块
    D3 学习资源
    折线图
    iscroll 4 下拉 上拉 加载
    iscroll
    重金悬赏的微软:提交Win8漏洞以及发布Win8应用
  • 原文地址:https://www.cnblogs.com/hooray/p/2246093.html
Copyright © 2011-2022 走看看