css - 在 45 度旋转元素上应用 50% 后的透明度

Question

这是一个包含段落的 block 元素。我们称它为 * Block A *

我想在它上面添加一个箭头提示，我这样做了:

使用以下 CSS:

.Block_A:before {
   content: '';
   position: absolute;
   top: 0; left: 50%;
   width: 1em; height: 1em;
   background: #0080FF;
   border-width: 1px 0 0 1px; border-style: solid; border-color: #0080FF;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

但如您所见，段落中的文字“died in”隐藏在提示后面。为了更好地查看和理解，我将显示在段落文本上方的提示的下半部分涂成了红色:

现在我如何才能使 Nib 的上半部分保持蓝色，但使下半部分(也就是红色部分)透明？像这样:

我尝试使用:

background: linear-gradient(to bottom, #0080ff 0%,rgba(255,255,255,0) 50%);

但它并没有像通常那样工作，因为尖端的形状不是正方形或矩形，因为我已经对其进行了转换(旋转 45 度)。

Answer 1

为什么不首先使用三 Angular 形？喜欢

 #triangle-up { 
   width: 0;
   height: 0; 
   border-left: 50px solid transparent;
   border-right: 50px solid transparent; 
   border-bottom: 100px solid #0080FF; 
 }

查看 http://css-tricks.com/examples/ShapesOfCSS/ .