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的三角形。我希望三角形透明（目前为白色），外面有一个2pt的蓝色边框。我发现的例子将一个元素放在另一个元素的顶部，这将无法工作，因为它将通过顶部透明度看到。

Answer 1

您可以使用不透明度。

#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

Answer 2

如果IE确实介意的话，

dest.Show()可以帮到你。

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

＆＃13;

mix-blend-mode

＆＃13;

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;
}

＆＃13;

SVG将使用alt属性执行或基本的png图像。

蒙面三角形div

2 个答案: