本篇内容主要讲解“CSS怎么绘制三角形和箭头”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么绘制三角形和箭头”吧!
成都创新互联公司专注于万安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供万安营销型网站建设,万安网站制作、万安网页设计、万安网站官网定制、成都小程序开发服务,打造万安网络公司原创品牌,更为您提供万安网站排名全网营销落地服务。
先来看看这段代码:
/**css*/ .d1{ width: 0; height: 0; border: 100px solid #339933; } /**html*/ <div class="d1"></div> /**css*/ .d2{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC #0099CC #996699 #339933; } /**html*/ <div class="d2"></div>
看了这两段代码,和效果图,是不是有一点眉目了?原来画三角形,只需要用元素的`border`来控制就可以了,`border-with`控制大小, `border-style`控制样式(实线、虚线等), `border-color`控制颜色,分上、右、下、左
向下三角形
/**css*/ .d3{ margin-left: 10px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC transparent transparent transparent; } /**html*/ <div class="d3"></div>
向左三角形
/**css*/ .d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; } /**html*/ <div class="d4"></div>
这里的`transparent`是透明的意思
接下来两种就留给聪明的你了,相信你可以的,动手才知道原来这么简单!
其实我们还可以通过,一种样式,来实现不能角度的三角形,那就是利用CSS3里面的旋转`transform:rotate(90deg)`。
/**css*/ .d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ } /**html*/ <div class="d4"></div>
向左箭头
/**css*/ .left{ position: absolute; } .left:before,.left:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px #fff solid; } .left:before{ border-right: 10px #0099CC solid; } .left:after{ left: 1px; /*覆盖并错开1px*/ border-right: 10px #fff solid; } /**html*/ <i class="left" ></div>
CSS绘制三角形和箭头,不用再用图片了
是不是发现箭头和三角形是一样的呢?发现了,说明你已经懂了,箭头其实就是2个三角形,然后用白色三角形覆盖蓝色三角形,并且错开1px,刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。
向上箭头
/**css*/ .top{ position: absolute; } .top:before,.top:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px #fff solid; } .top:before{ border-bottom: 10px #0099CC solid; } .top:after{ top: 1px; /*覆盖并错开1px*/ border-bottom: 10px #fff solid; } /**html*/ <i class="top" ></div>
通过上面两个例子,我想剩余两个方向的箭头,你应该可以搞定了,就是不能,那就会一种就好了,然后通过`transform:rotate(90deg)`,来旋转角度,还是能搞定各个方向的箭头。
到此,相信大家对“CSS怎么绘制三角形和箭头”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文题目:CSS怎么绘制三角形和箭头
本文路径:https://www.cdcxhl.com/article2/ghsjic.html
成都网站建设公司_创新互联,为您提供服务器托管、网站维护、全网营销推广、搜索引擎优化、做网站、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联