PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

CSS 实用技巧:制作三角形_html/css_WEB-ITnose

原创
2016-06-24 11:38:09 1115浏览

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

html代码如下:

css样式:

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

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

 

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。