在45度旋转元件上50%后应用透明度

Question

这是一个包含段落的块元素.我们称之为*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);
}

但是正如你所看到的那样,文章中的文章"死了"隐藏在小费背后.为了更好地查看和理解,我将红色的下半部分涂上了红色,这些部分显示在文章的文本上:

现在我如何保持尖端的上半部分为蓝色,但是让下半部分(又称红色部分)透明？像这样:

我试过用:

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

但它不像通常那样工作,因为尖端的形状不是正方形或矩形,因为我已经改变它(旋转45度).

Answer 1

为什么不使用三角形开头？喜欢

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