网页设计技巧总结:CSS制作网页中的三角形
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-02
| px; WIDTH: 150px; BACKGROUND: #ff9999; HEIGHT: 150px
}
.a_same {
Z-INDEX: 10; POSITION: absolute; WIDTH: 50px; BACKGROUND: #ff9999; HEIGHT: 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg)
}
.b_same {
Z-INDEX: 10; POSITION: absolute; WIDTH: 50px; BACKGROUND: #ff9999; HEIGHT: 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg)
}
.c_same {
Z-INDEX: 10; POSITION: absolute; WIDTH: 50px; BACKGROUND: #ff9999; HEIGHT: 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg)
}
.d_same {
Z-INDEX: 10; POSITION: absolute; WIDTH: 50px; BACKGROUND: #ff9999; HEIGHT: 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg)
}
.a_same {
TOP: 21px; LEFT: -25px
}
.b_same {
TOP: -25px; RIGHT: 21px
}
.c_same {
BOTTOM: 21px; RIGHT: -25px
}
.d_same {
BOTTOM: -25px; LEFT: 21px
}
3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。 ◆◆◆◆代码如下：
|
||
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于网页设计技巧总结:CSS制作网页中的三角形的所有评论
