分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

CSS绘制三角形和箭头,不使用再使用图片了

  • 时间:2018-09-11 22:02 作者:web秀 来源:web秀 阅读:575
  • 扫一扫,手机访问
摘要:前言还在使用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎样变就怎样变,还不使用担心失真等问题。先来看看这段代码:/**css*/.d1{ width: 0; height: 0; border: 100px solid #339933;}/**html*//*

前言

还在使用图片制作箭头,三角形,那就太lou了。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*/

CSS绘制三角形和箭头,不使用再使用图片了

CSS绘制三角形和箭头,不使用再使用图片了

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

CSS绘制三角形和箭头,不使用再使用图片了

向左三角形

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

CSS绘制三角形和箭头,不使用再使用图片了

CSS绘制三角形和箭头,不使用再使用图片了

这里的`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绘制三角形和箭头,不使用再使用图片了

CSS绘制三角形和箭头,不使用再使用图片了

箭头示例

向左箭头

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

CSS绘制三角形和箭头,不使用再使用图片了

CSS绘制三角形和箭头,不使用再使用图片了

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

声明

喜欢小编的点击关注,理解更多资源!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
【系统环境|软件环境】一步步教你开发、部署第一个去中心化应用 - 宠物商店(2022-03-15 15:13)
【系统环境|软件环境】循序渐进!一文学会高性能开发十大必需掌握的核心技术。(2022-03-15 15:13)
【系统环境|软件环境】Python游戏开发,pygame模块,Python实现贪吃蛇小游戏(2022-03-15 15:13)
【系统环境|软件环境】Spring Cloud Feign 记录单个服务耗时并处理 Hystrix 线程隔离模式!(2022-03-15 15:13)
【系统环境|软件环境】js数组方法全解(2022-03-15 15:12)
【系统环境|软件环境】字节二面:小伙子你来说下什么是伪共享?如何避免?(2022-03-15 15:12)
【系统环境|软件环境】写了Bug,误执行 rm -fr /*,我删删删删库了,要跑路吗?(2022-03-15 15:12)
【系统环境|软件环境】算法四:数字-复数计算(2022-03-15 15:12)
血鸟云