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

Question

我对编码还很陌生，所以这可能是一件非常简单的事情，我正在尝试做，但无法让它发挥作用。我制作了一些带有 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;
}

Answer 1

super 简单的方法:

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;

}

调整内边距以改变框的大小。