Maskierte aus Dreieck div

Question

Ich habe den folgenden Code ein Dreieck div am oberen und unteren Rand der Seite zu erstellen:

#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>

Dies schafft die Dreiecke mit den icn s innen. Ich möchte die Dreiecke transparent (derzeit weiß) mit einem 2pt blauen Rand um die Außenseite. Die Beispiele, die ich gefunden habe, legen ein Element übereinander, was nicht funktioniert, da es durch die obere Transparenz hindurch gesehen wird.

Answer 1

mix-blend-mode könnte Ihnen helfen, wenn IE es nichts ausmachte.

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 wird mit einem Alt-Attribut tun oder Grund PNG-Bild.

Answer 2

Sie könnten Opazität verwenden.

#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