Question

我对编码很陌生，所以这可能是我想要做的事情，但却无法让它发挥作用。我用css边框制作了一些箭头。现在我想在每个箭头后面做一个半透明的矩形。

这样的东西

但是用矩形代替圆圈。这是我到目前为止的代码：

 <div id="arrow"></div>



#arrow {
 display: block;
 border-right: 2px solid; border-bottom: 2px solid;
 width: 30px; height: 30px;
 transform: rotate(-45deg);
 border-color:black;
 margin:auto;
display:block;
position:relative;
}

Answer 1

超级简单的方法：

HTML：

<div id="arrowBox">
<div id="arrow"></div>
</div>

CSS：

#arrow {
 display: block;
 border-right: 2px solid; border-bottom: 2px solid;
 width: 30px; height: 30px;
 transform: rotate(-45deg);
 border-color:black;
 margin:auto;
display:block;
position:relative;
}

#arrowBox{

  background:rgba(0,0,0,0.5);
  display:inline-block;
  padding:10px 15px 10px 0;

}

调整填充以更改框的大小。

Answer 2

不要使用div作为箭头，而是尝试使用div作为矩形（如果需要，可以使用圆圈）。您需要background-color: rgba(0,0,0,0.4)或类似才能获得“半透明的黑色”效果。

完成后，将箭头样式放在::before伪元素中。使用定位将其放在正确的位置，但是应该很容易让箭头出现。不要忘记content:''来显示伪元素。

Answer 3

将css属性设置为矩形div或任何形状，

{ opacity: 0.5;}

Answer 4

您可以使用伪元素添加该框而不添加其他标记。如前所述，使用rgba定义背景颜色。

我用一个显示结果的例子做了一个小提琴，在不同的背景颜色上有4个不同方向的箭头：https://jsfiddle.net/7f6tg9s3/4/

这是箭头部分：

.arrow {
  display: inline-block;
  position:relative;
  width: 30px; 
  height: 30px;
}
.arrow::before {
  content: ' ';
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  width: 30px; 
  height: 30px;
  margin-right: -30px;
  margin-bottom: -30px;
  z-index: 1;
}
.arrow::after {
  content: ' ';
  display: block;
  box-sizing: border-box;
  position: relative;
  border-right: 2px solid;
  border-bottom: 2px solid;
  width: calc(25px / 1.41421);
  height: calc(25px / 1.41421);
  border-color: #fff;
  z-index: 2;
}
.arrow.right::after {
  transform: rotate(-45deg);
  top: 6px;
  left: 2px;
}
.arrow.left::after {
  transform: rotate(135deg);
  top: 6px;
  left: 12px;
}
.arrow.up::after {
  transform: rotate(-135deg);
  top: 12px;
  left: 7px;
}
.arrow.down::after {
  transform: rotate(45deg);
  top: 2px;
  left: 7px;
}

css箭头后面的半透明矩形

4 个答案: