CSS：透明指针像在App Store上的一个

也许我是愚蠢的ATM，但我无法弄清楚如何做到这一点：CSS：透明指针像在App Store上的一个

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

正如你所看到的，指针/的NAV-元件内部箭头是透明的，但示出的，而不是它的父，资产净值元素的内容。

这是我的HTML：

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

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

来源

2013-04-09 LeFauko

好它采取了一些做什么，但我想我要给你一个开始：

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

这里的主要问题是，你不能只是设置的箭头，透明的，因为菜单的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-09 14:40:00 Lowkase

认为这是最好的解决办法！谢谢：） – LeFauko 2013-04-09 16:24:56

好了，不知道如果我得到你的权利，但：

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

这意味着，你创造一个新的PNG文件使背景透明，只要你想画它。所有你没有使用的区域都是透明的。

让我们更容易一点理解：

您的导航是不活跃的，也不是你的鼠标悬停在它。然后，你应该看到标准的加载IMG（不带指针/箭头）。

- >我们再次在我们的鼠标悬停或点击它：

您的导航是现在活跃和新的图像（如.png文件）显示，而不是旧的。这幅图像是在一些未触摸的区域绘制的，因此它们是透明的。

来源

2013-04-09 14:08:11 Chrizzldi

您正在寻找的CSS3技术的现代化应用具体表现为：

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

在你的榜样，边框颜色已经使用rgba指定颜色作了半透明。

但是，该引用不会告诉您如何构建到底是什么屏幕快照显示。它只会解释如何创建三角形图案。

来源

2013-04-09 14:12:23

CSS：透明指针像在App Store上的一个

回答

相关问题