在保持PHP生成背景的同时用斜边塑造Div

时间:2013-10-14 19:36:41

标签: php html css

我在这里工作:

http://www.jasnasyogaonline.com/membership-test.php

如果你将鼠标悬停在右边的导航栏上,你会看到一个淡入效果,这种效果发生在背景动画到链接中间顶部和底部的位置。在三条彩色线条(右侧导航线的边框)之间,您会看到有白色。这是因为在网站的其他页面上,背景是白色的,而原始程序员只是使用背景图像来创建对角线'导航项的边缘。现在有一个完整的页面视频/图像,这不起作用,因为背景不是白色,效果会丢失。

我的客户现在希望在剃刀线之间保持透明,但保持导航项目的对角线边缘。如果我删除了导航项末尾的图像,它们就会变成直线矩形。我尝试了一些带边框/边框宽度等的CSS,但它有点棘手,因为如果你查看源代码,背景是由一个使用imagecreatetruecolor的PHP文件生成的。创建悬停效果。

关于如何在保持剃刀线之间的区域透明的同时切割右侧导航角落的任何想法?我开始没有想法了。谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

我的建议是将悬停边缘div放在一起

  .nav ul li div {

使用背景精灵/动画重新编码动画。实际上我根本不喜欢鼠标效应。也许你可以向客户出售更容易做的事情,如文字外发光或下划线效果。

另外:这篇文章与PHP没有任何关系

答案 1 :(得分:-1)

编辑我想不出另一种方法可以实现,但如果你想要这个设计,你可以试试。

.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}