php用 画三角形,CSS_使用css画三角形的方法代码，用纯css画个三角形以下是源代 - phpStudy...

使用css画三角形的方法代码

用纯css画个三角形以下是源代码：

复制代码代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

用纯css画个三角形

.rightdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color:transparent transparent transparent #A9DBF6;

}

.bottomdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: #A9DBF6 transparent transparent transparent;

}

.leftdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent #A9DBF6 transparent transparent;

}

.topdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent transparent #A9DBF6 transparent;

}

画个小三角形

复制代码代码如下:

#phpstudy_a{ border-top:10px solid #FFFFCC;

border-left:10px solid #FF3300;

border-bottom:10px solid #FFFFCC;}

以下代码兼容IE6：

复制代码代码如下:

display:inline-block;

width: 0;

height: 0;

border-width: 10px 10px;

border-style: dashed dashed solid dashed;

border-color: transparent transparent #ff0000;

font-size: 0;

line-height: 0;

-moz-transition: -moz-transform .2s ease-in;

-o-transition: -o-transform .2s ease-in;

transition: transform .2s ease-in;

vertical-align:text-top;

margin-left:5px

}

相关阅读:

javascript高级选择器querySelector和querySelectorAll全面解析

使用gd库实现php服务端图片裁剪和生成缩略图功能分享

css全屏背景图片设置,django加载图片路径详解

详解Java二叉排序树

jQuery代码实现对话框右上角菜单带关闭×

在Mac OS Yosemite 系统中如何发送超大邮件附件

jQuery删除节点的三个方法即remove()detach()和empty()

Win10系统怎么设置省电设置？Win10系统省电设置方法

php生成zip文件类实例

jQuery实现当前页面标签高亮显示的方法

设置span宽度高度的方法

Jquery中ajax方法data参数的用法小结

php实现多维数组中每个单元值(数字)翻倍的方法

PHP中子类重载父类的方法【parent::方法名】