CSS常用样式(一):绘制箭头

序言:总结一些常用CSS样式,方便以后使用

目录一、 边框旋转实现箭头二、 双三角覆盖实现箭头

一、 边框旋转实现箭头

1、导入css文件

<link rel="stylesheet" href="css/arrow1.css" />

2、设置容器

<div class="arrow-right"/>

3、设置矩形边框
border-style: solid;设置实线边框

.arrow-right {
content: "";
height: 60px;
width: 60px;
border-color: blue;
border-style: solid;
position: absolute;
}

效果图如下:
CSS常用样式(一):绘制箭头
4、边框部分隐藏
border-width 设置边框宽度。设置4个值分别代表上边框、右边框、下边框、左边框。
这里我们隐藏下边框和左边框,如下:

 border-width: 8px 8px 0 0;

效果图如下:
CSS常用样式(一):绘制箭头
5、边框旋转
在css3的transform属性中,可以使用矩阵matrix对图像进行旋转
上图隐藏的边框,如果旋转一定角度就是箭头,实现如下:

transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

效果图如下:
CSS常用样式(一):绘制箭头
6、完整实现
上述原理已经实现箭头,但是有个问题是箭头上方显示有点不完整,我可以先提前整个矩形容器来容纳箭头。下方是所有代码:

.arrow-right{
height: 120px;
width: 60px;
display :inline-block;
position: relative;
}
.arrow-right::after {
content: "";
height: 60px;
width: 60px;
top: 12px;
border-width: 8px 8px 0 0;
border-color: blue;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
}

效果图如下:
CSS常用样式(一):绘制箭头
这里实现向左箭头只需修改旋转角度即可transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);

二、 双三角覆盖实现箭头

1、导入css文件

<link rel="stylesheet" href="css/arrow2.css" />

2、设置容器

<div class="arrow-down"/>

3、绘制矩形
我们先用border绘制由四个三角形组成的矩形

.arrow-down{
width: 0;
height: 0;
border: 60px solid;
border-color: blue red yellow green;
}

效果图如下:
CSS常用样式(一):绘制箭头
4、绘制三角形
绘制的四个三角形,使用“transparent”透明色–来隐藏3个三角形

 border-color: blue transparent transparent transparent;

效果图如下:
CSS常用样式(一):绘制箭头
5、绘制箭头
绘制2个相同大小三角形、产生一定位移,效果如下:
CSS常用样式(一):绘制箭头
如果覆盖的第2个三角形颜色修改成和背景色一样,代码如下:

.arrow-down{
width: 0;
height: 0;
position: relative;
border: 60px solid;
border-color: blue transparent transparent transparent;
}
.arrow-down::after{
content: '';
position: absolute;
top: -68px;
left: -60px;
border: 60px solid;
border-color: white transparent transparent transparent;
}

效果如下:
CSS常用样式(一):绘制箭头
6、绘制其他箭头
只需要修改隐藏的三角形和位移即可绘制其他方向的箭头。如下绘制向右箭头:

.arrow-right{
width: 0;
height: 0;
position: relative;
border: 60px solid;
border-color: transparent transparent transparent blue;
}
.arrow-right::after{
content: '';
position: absolute;
top: -60px;
left: -68px;
border: 60px solid;
border-color: transparent transparent transparent white;
}

CSS常用样式(一):绘制箭头
本文介绍css的2种方式绘制箭头,请大家多多指教,能get到知识点不要忘了关注点个赞~

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

CSS常用样式(一):绘制箭头

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » CSS常用样式(一):绘制箭头
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏