文档章节

用 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
CSS绘制三角形—border法

1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: 实现原理: 首先来看在为元素添加border时,border的样子;假设有如下代码: 效果图: 这是我们平常使...

阿尔卑斯的隆冬
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Coding and Paper Letter(三十九)

资源整理。 1 Coding: 1.Python库benchmark rio s3,用于在访问S3上的文件时对Rasterio / GDAL的多线程性能进行基准测试的工具。 benchmark rio s3 2.Pangeo-Binder Cookiecutter模板。 cook...

胖胖雕
47分钟前
2
0
Promise 对象

Promise(承诺) 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供...

简心
50分钟前
1
0
让UI设计师崩溃的瞬间,你经历过哪些?

隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通。流畅的沟通,和声细语,...

mo311
51分钟前
3
0
python进制转换

#进制转换print(bin(10)) #十进制转换成二进制print(oct(10)) #十进制转换成八进制print(hex(10)) #十进制转换成十六进制print(int('1010',2)) #二进制转十进制print(int(...

fadsaa
今天
13
0
syntax error near unexpected token

最近不断重复在虚拟机CentOS测试安装gitlab,因为gitlab有一个脚本需要饭强才能下载,于是我先在windows下载好再上传到虚拟机,可是执行脚本的时候提示“syntax error near unexpected toke...

W_Lu
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部