html - CSS箭头后面的半透明矩形

我对编码非常陌生，因此我尝试做起来可能很简单，但却无法使其正常工作。
我用css边框制作了一些箭头。现在，我想做一个在每个箭头后半透明的矩形。

this之类的

但是用矩形而不是圆形。
这是到目前为止我得到的代码：

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

最佳答案

超级简单的方法：

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;

}

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

关于html - CSS箭头后面的半透明矩形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34899717/