用 CSS 实现三角形
用 CSS 实现三角形
ali安东尼 发表于3个月前
用 CSS 实现三角形
  • 发表于 3个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

1. 利用 border 属性实现三角形       怎么border能实现三角形呢?是不是很神奇?别着急,先来看看一个梯形:          

        .triangle{             width:30px;             height:30px;             border-width:20px;             border-style:solid;             border-color:#e66161 #f3bb5b #94e24f #85bfda;         }

     如果***width跟height都设置为0***,会出现什么样的效果呢?

    哈哈,结果就是四个梯形都变成了三角形了。          

    可是只想要其中一个三角形,这怎么办?很简单,只要***把不需要的边框颜色都设成透明或和背景颜色相同的颜色***,比如说要上面红色的三角形,那么可以设置样式如下:

        .triangle{             width:0;             height:0;             border-width:20px;             border-style:solid dashed dashed dashed;             border-color:#e66161 transparent transparent transparent;         }

    结果就是这样子了:

     > 推荐:

1. 用css可是实现三角形,但是借用bookstrap可以更简单地实现,比如:

    <span class="caret"></span>

    其原理是借助上述的borde属性来控制的

    可以看看这篇文章的介绍:http://blog.sina.com.cn/s/blog_6c2c68a60102wigz.html

2. 使用font-some字体图标也能实现三角形,首先先引入font-some的样式文件

    <link href="css/font-awesome.css" rel="stylesheet" />

    html:

        <i class="fa fa-sort-desc"></i>         <i class="fa fa-sort-up"></i>    

本文参考:http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html

由睿江云人员提供,想了解更多,请登陆www.eflycloud.com

共有 人打赏支持
粉丝 2
博文 187
码字总数 166991
×
ali安东尼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: