css3 纯css实现绘制三角形、箭头效果

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。

<div class="triangle"></div>

1、利用border来实现
(1)向下三角形

.triangle{width: 0; height: 0;border-width: 100px;border-style: solid;border-color:#ff0000 transparent transparent transparent;}

(2)向左三角形

.triangle{width: 0; height: 0;border-width: 50px;border-style: solid;border-color: transparent #ff0000 transparent transparent;}

(3)利用 CSS3 transfrom 旋转 45 度实现三角形

<div class="triangle"><span>css3 transfrom 三角形</span><div class="transform"></div>
</div>

.triangle {position:relative;width:200px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;
}
.transform {position:absolute;bottom:-8px;bottom:-6px;left:30px;overflow:hidden;width:13px;height:13px;background:#E9FBE4;border-bottom:1px solid #C9E9C0;border-right:1px solid #C9E9C0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);
}

总结： transparent是透明的意思，也就是与背景色同化。

2、利用伪类实现箭头

<div class="arrow" ></div>

(1)向左箭头

.arrow{position: relative;
}
.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px #fff solid;
}
.arrow:before{border-right: 20px #ff0000 solid;
}
.arrow:after{left: 4px; /*通过覆盖调整箭头粗细*/border-right: 20px #fff solid;
}

(2)向上箭头

.arrow{position: relative;
}
.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-right: 20px transparent dashed;border-bottom: 20px #fff solid;
}
.arrow:before{border-bottom: 20px #ff0000 solid;
}
.arrow:after{top: 4px; /*通过覆盖调整箭头粗细*/border-bottom: 20px #fff solid;
}

(3)利用 CSS3 transfrom 旋转来实现多方向箭头

比如：向下箭头

.arrow{position: relative;
}
.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-right: 20px transparent dashed;border-bottom: 20px #fff solid;
}
.arrow:before{border-bottom: 20px #ff0000 solid;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);
}
.arrow:after{border-bottom: 20px #fff solid;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);bottom: -36px; /*通过覆盖调整箭头粗细*/
}

css3 纯css实现绘制三角形、箭头效果相关推荐

html样式border倒三角写法,纯CSS - border绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...

css3 纯css实现绘制三角形、箭头效果

css3 纯css实现绘制三角形、箭头效果相关推荐

最新文章

热门文章