CSS3实现的菱形效果代码实例

CSS3实现的菱形效果代码实例:
本章节分享一段代码实例，它使用CSS3实现了菱形效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.antzone{
  width:80px;
  height:80px;
  margin:40px 0 0 40px;
  -webkit-transform-origin:0 100%;
  -moz-transform-origin:0 100%;
  -o-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  transform-origin:0 100%;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
  background: #E5C3B2;
 }
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17890

更多内容可以参阅:http://www.softwhy.com/divcss/

时间： 2024-12-24 00:54:46

CSS3实现的菱形效果代码实例的相关文章

CSS3实现的字符串逐字高亮效果代码实例

CSS3实现的字符串逐字高亮效果代码实例:本章节分享一段代码实例,它实现了字符串逐字高亮效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title>

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

css3实现的绘制图形图案效果代码实例

css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的,或者说费好大的劲也只能够得到非常简单的图案,css3的出现将绘制复杂的图形这个目标成为可能,下面就是一个相关的代码实例,有这方面需要的朋友可以参考一下它的实现方式.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

CSS3实现的鼠标悬浮开门关门效果代码实例

CSS3实现的鼠标悬浮开门关门效果代码实例:本章节分享一段代码实例,它利用CSS3模拟实现了简单的开门关门效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<

使用box-shadow属性实现圆角效果代码实例

使用box-shadow属性实现圆角效果代码实例:通常实现圆角效果我们使用border-radius,其实我们也可以使用box-shadow属性来实现.两个属性的具体用法这里就不多介绍了,具体可以参阅以下两个文章:(1).圆角效果可以参阅CSS3实现圆角效果一章节.(2).box-shadow可以参阅CSS3的box-shadow属性用法详解一章节.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" u

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

js实现的数字四舍五入效果代码实例

js实现的数字四舍五入效果代码实例:下面直接给出能够截取指定位数字符串,且具有四舍五入效果的代码: var num=3.1415926; console.log(num.toFixed(3)); toFixed()函数可以参阅javascript的Number对象的toFixed()方法一章节. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11973 更多内容可以参阅:http://www.softwhy.com/javas

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten