Question

这是一个包含段落的块元素。我们称之为* Block A * enter image description here

我想在它上面添加一个箭头，我做了： enter image description here

使用以下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);
}

但正如你所看到的那样，文章中的文章“死了”隐藏在小费背后。为了更好地了解和理解，我将红色的下半部分涂上了红色，这些部分显示在文章的正文中：

enter image description here

现在我怎么能保持尖端的上半部分为蓝色，但是让下半部分（又称红色部分）透明？像这样： enter image description here

我尝试使用：

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/。

Answer 2

而不是旋转矩形为什么不尝试创建一个简单的三角形，如下所示：

HTML

<div class="arrow-up"></div>

CSS

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid blue;
}

基于作者评论的编辑--------------

好的，如果你不打扰IE，这个背景值应该可以解决问题：

background: -moz-linear-gradient(top, rgba(0,128,255,1) 0%, rgba(0,128,255,1) 49%, rgba(0,128,255,0.01) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,128,255,1)), color-stop(49%,rgba(0,128,255,1)), color-stop(50%,rgba(0,128,255,0.01)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,128,255,1) 0%,rgba(0,128,255,1) 49%,rgba(0,128,255,0.01) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,128,255,1) 0%,rgba(0,128,255,1) 49%,rgba(0,128,255,0.01) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,128,255,1) 0%,rgba(0,128,255,1) 49%,rgba(0,128,255,0.01) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,128,255,1) 0%,rgba(0,128,255,1) 49%,rgba(0,128,255,0.01) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080ff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

简单演示 - http://jsfiddle.net/LH69Q/

P.S。您可以从这里自己生成渐变来修改渐变 - http://www.colorzilla.com/gradient-editor/

Answer 3

首先，让我们说已经发布的答案是实现这一目标的好方法（包括关于z-index的评论）。

无论如何，如果OP wnats是垂直设置渐变，那么需要改变

to bottom

的

45 deg

请注意，在最后的w3c规范中，设置角度的方式已经改变，因此值将从语法更改为语法。

只是试验..

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

3 个答案: