为菜单PNG图像动态上色

Question

我正在使用一个现代的菜单风格，包括在左侧和右侧的2个PNG图像，这给了菜单一个3d的外观和感觉。

由于我想使我的网站风格可定制，我需要这些图像也改变他们的颜色根据客户的颜色愿望。

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

我发现了一些带有笑脸的东西，我的意思是，但在我的例子中，它不是css创建的笑脸，而是一个png图像( http://lab.artlung.com/css3-smiley/ )

谢谢。

Answer 1

这是非常容易的样式圆角与边界半径。要创建这个小三角形，你可以创建一个css三角形(see this fiddle)，然后你可以用一些渐变来设计这个三角形的样式，以达到3D效果！只要把这个小三角形放在圆角矩形左下角的下方，就行了！这是你没有png的3D效果！

三角形的代码：

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>​