css - 为菜单 PNG 图像动态着色

Question

我正在使用现代菜单样式，其中包括左右两侧的 2 个 PNG 图像，为菜单提供 3d 外观和感觉。

由于我想让我的网站样式可定制，我还需要这些图像来根据客户对颜色的需求来改变它们的颜色。

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

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

谢谢你。

Answer 1

使用边框半径设计圆角非常容易。要创建小三角形，您可以制作一个 css 三角形（请参阅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 */

}​</p>

HTML

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