我使用HTML和CSS开发了一个带有主页图标的简单导航栏。
现在我想将菜单项的按钮转换为平行四边形。经过快速研究后我注意到,许多人正在使用-webkit-transform: skew(-20deg)
(CSS)来实现这一目标。当我应用代码更改时,房屋图标也会转换。
有没有办法将我的菜单项转换为平行四边形而不转换Base64背景图像?
.menu-item {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center, -webkit-linear-gradient(orange, red);
height: 50px;
width: 100px;
-webkit-transform: skew(-20deg)
}
.menu-item:hover{
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center, -webkit-linear-gradient(red,orange);
}
.menu-item a {
color: transparent !important;
}
li {
list-style-type: none;
}
.nav-primary {
background: #222;
}
<nav class="nav-primary">
<ul>
<li class="menu-item"><a href="#">Home</a>
</li>
</ul>
</nav>
答案 0 :(得分:2)
不要将背景图片放在li
上,将其放在锚点上,然后将其向后倾斜。
本质:
.menu-item {
background: -webkit-linear-gradient(orange, red);
height: 50px;
width: 100px;
-webkit-transform: skew(-20deg)
}
和
.menu-item a {
height: 100%;
display: block;
background: url('data:image/png;base64,...etc) no-repeat center center;
-webkit-transform: skew(20deg)
}
.menu-item {
background: -webkit-linear-gradient(orange, red);
height: 50px;
width: 100px;
-webkit-transform: skew(-20deg)
}
.menu-item a {
height: 100%;
display: block;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center center;
-webkit-transform: skew(20deg)
}
.menu-item:hover {
background: -webkit-linear-gradient(red, orange);
}
.menu-item a {
color: transparent !important;
}
li {
list-style-type: none;
}
.nav-primary {
background: #222;
}
&#13;
<nav class="nav-primary">
<ul>
<li class="menu-item"><a href="#">Home</a>
</li>
</ul>
</nav>
&#13;