文档章节

用 CSS 实现三角形

ali安东尼
 ali安东尼
发布于 2017/09/08 15:12
字数 310
阅读 4
收藏 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

© 著作权归作者所有

共有 人打赏支持
ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar
2017/09/27
0
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0
【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十
04/14
0
0
css实现三角形

工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。 假设我们...

tiancai啊呆
01/10
0
0
令人难以置信的纯 CSS3 图标

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Loui...

古欣
2010/09/13
1K
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。 在ng-repeat模板实例内部会暴露出一些特殊属...

孟飞阳
35分钟前
1
0
URLEncoder和URLDecoder

public static void main(String[] args) { String str1 = "https://test1-life.pingan.com/ilifecore/productMall/loading.html?productId=8000000241&channelCode=XCX00001&productCode=00......

鬼才王
45分钟前
2
0
对象及变量的并发访问-第一篇

方法内部的变量为线程安全变量 “非线程安全”问题存在于“共享变量”中,如果是方法内部的私有变量,则不存在“非线程安全”问题,所得结果也就是“线程安全”的。 package chaprer3;/**...

简心
45分钟前
1
0
程序媛眼中的程序猿原来是这样子的!

一直都想写一篇关于描述程序员的文章,但是一直没能开头,一来因为文笔不好,更主要的原因是貌似对程序员既熟悉又不熟悉,很怕写出来的是以偏概全,给大家造成对程序员的既定印象,不过,管他...

Java小铺
今天
1
0
bean标签

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 bean标签 bean标签中的init-method属性,该属性...

凯哥学堂
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部