CSS效果：CSS实用技巧制作三角形以及箭头效果

概述实现如图所示的三角形图标： html代码如下： css样式： 实现箭头效果如下所示： CSS代码： html代码：

实现如图所示的三角形图标：

HTML代码如下：

<div class="arrow-up"></div>="arrow-down"="arrow-left"="arrow-right">

CSS样式：

body{background:#faf7ef;}div{margin:20px auto}div.arrow-up {  wIDth:0px;  height:  border-left:50px solID transparent;    border-right:   border-bottom:50px solID #ff0000;   Font-size:  line-height:0px;} div.arrow-down {  border-right:  border-top:50px solID #0000ff;  Font-size: div.arrow-left {  border-bottom:    border-top:   border-right:50px solID #008000; div.arrow-right {   border-top:   border-left:50px solID #ffff00;0px;}

 实现箭头效果如下所示：

CSS代码：

.arrow{    display: inline-block;    border-top: 2px solID;    border-right:    wIDth: 100px;    height:    border-color: #EA6000;    transform: rotate(-135deg);    margin: 50px auto auto 100px;}

HTML代码：

span ="arrow"span>

 

总结

以上是内存溢出为你收集整理的CSS效果：CSS实用技巧制作三角形以及箭头效果全部内容，希望文章能够帮你解决CSS效果：CSS实用技巧制作三角形以及箭头效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。