Question

我使用的是现代菜单风格，包括左侧和右侧2张PNG图像，为菜单提供了3D外观。

由于我想让我的网站风格可定制，我还需要根据客户对颜色的需求改变颜色。

我的问题是我不知道如何做到这一点。

我找到一些带笑容的东西，我的意思是但在我的情况下，它不是一个css创建的笑脸，而是一个png图像（http://lab.artlung.com/css3-smiley/）

谢谢。

Answer 1

使用border-radius来设置圆角的样式非常容易。要创建小三角形，您可以创建一个css三角形（see this fiddle），然后您可以使用一些渐变来设置该三角形的三维效果！只需将小三角形放在圆角矩形的左下方，瞧！这是你的3D效果，而不是png！

三角形的代码：

CSS：

.arrow-left {
margin-left:50px;
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent; 

border-right:50px solid blue; 
transform:rotate(135deg);
-ms-transform:rotate(135deg); /* IE 9 */
-moz-transform:rotate(135deg); /* Firefox */
-webkit-transform:rotate(135deg); /* Safari and Chrome */
-o-transform:rotate(135deg); /* Opera */

}

HTML

<div class="arrow-left"></div>

动态着色菜单PNG图像

1 个答案: