如何用css画出三角形
2016-07-28 00:48
555 查看
在平时的开发中我们经常要使用到小三角
,我们除了使用切出来的图案,还有其他方式来实现这个小三角吗?答案是肯定的,只要通过border这个css属性就可以简单实现啦。
下面让我们一步步来看下是如何实现的。
首先我们来看如下代码
但是如果我们把width 和heigth设置成为0那又变成啥了?
看图可知,对于行内元素width和heigth并不起效果的,所以在triangle_test1中我们需要使用到
font-size:0这个css属性来设置行内元素的高度.
到这一步我们就应该知道三角形该怎么实现了吧。
有人说那我只设置border-top的属性,只让踏一个显示不就好了么?真的是这样吗?
然而事实是这样并不能实现。这里通过一个小例子来解释
1.1 设置相邻边框可见
显示出来是这样子的,红色边框显示为梯形
看到了吗,红色并不是显示为梯形,黑色不显示的话,他会把部分红色区域覆盖,规律一看就知。
所以使另外三边变为透明即可实现小三角。
2.设置边框颜色透明度
所以这里用到了一个ie6以下浏览器的特点就是border-style:dashed这个属性
可以参考文章 http://it.chinawin.net/application/article-180df.html
所以最终的结果为
以上只有上下左右三角的画法,接下来我们简单说下左上角三角的画法
这里就可以用到上述文中1.1中的样式
这样我们只要设置border-style:solid dashed dashed dashed;
border-color:red transparent transparent transparent;即可得到红色的左上箭头
,我们除了使用切出来的图案,还有其他方式来实现这个小三角吗?答案是肯定的,只要通过border这个css属性就可以简单实现啦。
下面让我们一步步来看下是如何实现的。
首先我们来看如下代码
<style type="text/css"> .triangle_test{ width:50px; height: 50px; border-width: 15px; border-color: red green black blue; border-style: solid; } .triangle_test1{ width:100px; height:100px; border-width: 15px; border-color: red green black blue; border-style: solid; } </style> <body> <div class="triangle_test"></div> <p> <span class="triangle_test1"></span> <s class="triangle_test1"></s> </p> </body>显示结果:
但是如果我们把width 和heigth设置成为0那又变成啥了?
看图可知,对于行内元素width和heigth并不起效果的,所以在triangle_test1中我们需要使用到
font-size:0这个css属性来设置行内元素的高度.
.triangle_test1{ width:0; height:0; border-width: 15px; border-color: red green black blue; border-style: solid; font-size:0; }
到这一步我们就应该知道三角形该怎么实现了吧。
有人说那我只设置border-top的属性,只让踏一个显示不就好了么?真的是这样吗?
然而事实是这样并不能实现。这里通过一个小例子来解释
1.1 设置相邻边框可见
.triangle_1{ width:100px; height: 100px; border-width:20px;/* 20px 0 0;*/ border-style: solid; border-color: red green blue black; }
显示出来是这样子的,红色边框显示为梯形
.triangle_1{ width:100px; height: 100px; border-width:20px 20px 0 0;/*这里有修改*/ border-style: solid; border-color: red green blue black; }
看到了吗,红色并不是显示为梯形,黑色不显示的话,他会把部分红色区域覆盖,规律一看就知。
所以使另外三边变为透明即可实现小三角。
2.设置边框颜色透明度
.triangle2{/*兼容各个浏览器*/ width: 0; height: 0; border-width: 10px; border-style:solid; /*dashed dashed dashed/* border-color: red transparent transparent transparent; font-size:0; }但是这个就会导致不能兼容ie6以下的浏览器,因为不识别transparent属性。
所以这里用到了一个ie6以下浏览器的特点就是border-style:dashed这个属性
可以参考文章 http://it.chinawin.net/application/article-180df.html
所以最终的结果为
.triangle2{ /*兼容各个浏览器*/ width: 0; height: 0; border-width: 10px; border-style:solid dashed dashed dashed; border-color: red transparent transparent transparent; font-size:0; }--------------------------------------------------------------------------------
以上只有上下左右三角的画法,接下来我们简单说下左上角三角的画法
这里就可以用到上述文中1.1中的样式
.triangle_1{ width:0;//将width和heigth设置为0 height: 0; border-width:20px 20px 0 0; border-style: solid; border-color: red green blue black; }
这样我们只要设置border-style:solid dashed dashed dashed;
border-color:red transparent transparent transparent;即可得到红色的左上箭头
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 设计更快的网页(三):字体和 CSS 调整