Css：菜单悬停创建自定义形状背景图像？（使用css的平行四边形）

Posted 2023-05-08

【中文标题】Css：菜单悬停创建自定义形状背景图像？（使用css的平行四边形）

【英文标题】：Css: Menu hover create custom shape background image?(parallelogram shape using css)

【发布时间】：2013-08-07 05:15:48

【问题描述】：

我有导航 html，想像这个附件一样在悬停时添加图像，如果菜单文本长或短，它应该正确设置。如果有正常图像，它可以设置但形状不同，所以我该如何设置这个？

有没有办法使用任何 css 制作这样的形状？

【问题讨论】：

使用 CSS 你不能创造条件。改用 jQuery

他在谈论 Hover.. 他为什么要使用 jQuery。 CSS 支持悬停

使用灰色渐变作为列表项的背景，使用带白角的透明图像作为链接项的背景。

我建议您阅读 [this][1] so question 以了解如何绘制纯 css 三角形。平行四边形也应该可以实现 [1]：***.com/questions/7073484/…

@M1K1O jQuery isn't the solution to everything。真的是is not。

【参考方案1】：

使用伪元素 :before 和 :after

FIDDLE

.testClass:hover:before 
    content: '';
    position: absolute;
    top:0;
    left:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent beige transparent;


.testClass:hover:after 
    content: '';
    position: absolute;
    top:0;
    right:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: beige transparent transparent transparent;

【讨论】：

比我的解决方案更好。我承认

刚刚试了一下。 jsfiddle.net/rQgtJ 工作正常，但有一个问题。只需悬停菜单项。渐变只会出现在中间，不会出现在平行四边形的边缘。

hmmm，我之前没有尝试向边框添加渐变，我刚刚找到了这篇文章***.com/a/6441510/703717，但我不确定这是否可行。另请注意，每个伪元素上只有一个边框具有颜色

【参考方案2】：

像使用 css 一样

#parallelogram  width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; 

检查链接 http://jsfiddle.net/2G3zf/

【讨论】：

在 IE8 中不工作.. 是否有可能获得像附加图像一样的悬停效果？

【参考方案3】：

详细说明 slash197 在这里给出的评论是我之前为链接按钮创建的工作小提琴。

FIDDLE

这演示了 CSS 中的 Hover 和渐变属性...这正在应用于 DIV

HTML

<div >
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>

CSS

div 
    float:left;   
    background-color:#fff;    


.testClass 
    margin-top: 0px;
    margin-left: 0px;
    width: 100px;
    height: 63px;
    zoom: 1;
    display: block;
    background-repeat: no-repeat;
    background: #fff;


.testClass:hover 
    background: #eaebea;
    -webkit-transform: skew(-20deg);
    /* Old browsers */
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0);
    /* IE6-9 */

编辑：Updated fiddle

适用于 IE9-10