CSS怎么绘制三角形和箭头

本篇内容主要讲解“CSS怎么绘制三角形和箭头”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么绘制三角形和箭头”吧!

成都创新互联公司专注于万安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供万安营销型网站建设,万安网站制作、万安网页设计、万安网站官网定制、成都小程序开发服务,打造万安网络公司原创品牌,更为您提供万安网站排名全网营销落地服务。

先来看看这段代码:

/**css*/
.d1{
 width: 0; 
 height: 0; 
 border: 100px solid #339933;
}
/**html*/
/**css*/ .d2{  width: 0;   height: 0;  border-width: 100px;  border-style: solid;  border-color:#FFCCCC #0099CC #996699 #339933; } /**html*/

看了这两段代码,和效果图,是不是有一点眉目了?原来画三角形,只需要用元素的`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*/

向左三角形

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
}
/**html*/

这里的`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*/

箭头示例

向左箭头

/**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*/

CSS怎么绘制三角形和箭头

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*/

通过上面两个例子,我想剩余两个方向的箭头,你应该可以搞定了,就是不能,那就会一种就好了,然后通过`transform:rotate(90deg)`,来旋转角度,还是能搞定各个方向的箭头。

到此,相信大家对“CSS怎么绘制三角形和箭头”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享题目:CSS怎么绘制三角形和箭头
标题URL:http://pwwzsj.com/article/ghsjic.html

其他资讯