屏蔽掉三角格

Question

我有下面的代码创建在页面的顶部和底部的三角形div：

#arrowdown, #arrowup { 
 
    display: block; 
 
    position: fixed; 
 
    left: 0; right: 0; 
 
    width: 0; height: 0; 
 
    margin: 0 auto; 
 
    border-left: 55px solid transparent; 
 
    border-right: 55px solid transparent; 
 
    z-index: 20; 
 
} 
 

 
#arrowdown { 
 
    bottom: 0; 
 
    border-bottom: 55px solid rgba(250,250,250,0.75); 
 
} 
 

 
#arrowup { 
 
    top: 0; 
 
    border-top: 55px solid rgba(250,250,250,0.75); 
 
} 
 

 
#arrowdown .icn, #arrowup .icn { 
 
    display: block; 
 
    position: absolute; 
 
    left: -18px; 
 
    color: #000; 
 
    text-align: center; 
 
    padding: 10px; 
 
    z-index: 25; 
 
} 
 

 
#arrowdown .icn {bottom: -52px;} 
 
#arrowup .icn {top: -52px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css" rel="stylesheet"/> 
 

 

 
<button id="arrowup"> 
 
    <i class="icn fa fa-chevron-up fa-2x"></i> 
 
</button> 
 

 
<button id="arrowdown"> 
 
    <i class="icn fa fa-chevron-down fa-2x"></i> 
 
</button>

这将创建与icn S的内部的三角形。我想要三角形透明（现在是白色），外面有2pt的蓝色边框。我发现的例子把一个元素放在另一个元素的顶部，这将不起作用，因为它会通过顶部透明度看到。

Answer 1

mix-blend-mode可以帮助你，如果IE没有介意。

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/mix-blend-mode

button { 
 
    /* reset */ 
 
    background:white; 
 
    border:none; 
 
    /* prepare */ 
 
    color:white; 
 
    /* make a CSS stroke */ 
 
    text-shadow:0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue;/* increase numbers of shadow to erase the blur effect */ 
 
    /* do blend it */ 
 
    mix-blend-mode:multiply; 
 
} 
 
/* show transparency */ 
 
body { 
 
    background:linear-gradient(45deg,lime,turquoise,gray,purple,tomato) yellow; 
 
    background-size:450px 450px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<button id="arrowdown"> 
 
    <i class="icn fa fa-chevron-down fa-2x"></i> 
 
</button><button id="arrowup"> 
 
    <i class="icn fa fa-chevron-up fa-2x"></i> 
 
</button> 
 

 
<button id="arrowdown"> 
 
    <i class="icn fa fa-chevron-down fa-2x"></i> 
 
</button><button id="arrowup"> 
 
    <i class="icn fa fa-chevron-up fa-2x"></i> 
 
</button> 
 

 
<button id="arrowdown"> 
 
    <i class="icn fa fa-chevron-down fa-2x"></i> 
 
</button>

SVG将做或用alt属性基本PNG图像。

Answer 2

您可以使用不透明度。

#arrowup { 
    top: 0; 
    border-top: 55px solid rgba(250,250,250,0.75); 
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
} 

http://www.w3schools.com/css/css_image_transparency.asp