0

也许我是愚蠢的atm，但我不知道该怎么做：

http://s24.postimg.org/k9fl1y2s5/arrow.png

如您所见，导航元素内的指针/箭头是透明的，但显示的是内容而不是其父导航元素。

这是我的 HTML：

<nav>
   ...
   <div id="pointer></div> <!-- this is the arrow -->
</nav>
<div id="content">...</div>

我怎样才能做到这一点？呃，希望你明白我的意思...... :)

4

3 回答 3

0

好吧，不确定我是否正确，但是：

我很确定指针/箭头是一个单独的 img 文件，在以下情况下加载和显示：鼠标悬停、活动（例如）。

这意味着，您创建一个新的 .png 文件，使背景透明并根据需要绘制它。您没有绘制的所有区域都是透明的。

让我们让它更容易理解：

您的导航未激活，您的鼠标也未悬停在其上。然后你应该看到标准加载的 img（没有指针/箭头）。

--> 我们将鼠标悬停在它上面或单击它：

您的导航现在处于活动状态，并显示新图像（例如 .png 文件）而不是旧图像。此图像绘制的某些区域未触及，因此它们是透明的。

于 2013-04-09T14:08:11.603 回答
0

您正在查看 CSS3 技术的现代应用程序，如下所示：

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

在您的示例中，边框颜色已设为半透明，rgba用于指定颜色。

但是，该参考资料不会告诉您如何准确构建屏幕截图所显示的内容。它只会解释如何创建三角形图案。

于 2013-04-09T14:12:23.993 回答
0

好的，这需要做一些事情，但我想我有一个开始：

http://jsfiddle.net/uLDzA/2/

这里的主要问题是您不能只将 ARROW 设置为透明，因为菜单 div 将具有某种纯色，不会让透明渗透到主背景。

我通过将菜单项分解为顶部和底部来解决这个问题。顶部有文本，底部是这样构造的，以便我们“模拟”中间部分的三角形并给它一个透明的背景。

基本上，通过像 CSS 拼图一样将箭头拼凑在一起，将箭头构建到菜单项本身中。

<div class="con">
    <div class="item">
        <div class="item_top">
            top
        </div> 
        <div class="item_btm">
            <div class="item_btm_lft">&nbsp;</div>
            <div class="item_btm_ptr">&nbsp;</div>
            <div class="item_btm_rgt">&nbsp;</div>                 
        </div>
    </div>
</div>

.con {
    width:100px;
    height:40px;
    padding:20px;
    background:url('http://placekitten.com/g/100/100');  
}

.item {
    width:100px;
    background:transparent;
}

.item_top {
    background:orange;
    text-align:center;
    color:#fff
}

.item_btm {
    width:100%;
    overflow:hidden;
}

.item_btm_lft {
    width:40px;
    float:left;
    background:orange;
    border-bottom:2px solid orange;

}

.item_btm_ptr {
    width: 0px;
    height: 0px;
    float:left;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent orange transparent orange;
}

.item_btm_rgt {
    width:40px;
    float:left;
    background:orange;
    border-bottom:2px solid orange;
}
于 2013-04-09T14:40:00.113 回答