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

Question

我使用的是现代菜单样式，在左侧和右侧包含 2 个 PNG 图像，使菜单具有 3d 外观和感觉。

因为我想让我的网站风格可定制，我还需要这些图像根据客户对颜色的需求改变它们的颜色。

我的问题是我不知道如何完成它。

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

谢谢。

Answer 1

使用 border-radius 设计圆 Angular 非常容易。要创建小三 Angular 形，您可以制作一个 css 三 Angular 形 (see this fiddle)，然后您可以使用一些渐变样式为该三 Angular 形设置样式以获得 3d 风格的效果!只需将小三 Angular 形放在圆 Angular 矩形左下角的下方，瞧!这是没有 png 的 3D 效果!

三 Angular 形的代码:

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