CSS箭头后面的半透明矩形

Question

I'm quite new to coding so it's probably something really easy that I'm trying to do but can't get it to work. I've made some arrows with css borders. Now I want to do a rectangle that is semi transparent behind each arrow.

Something like this

But with rectangles instead of the circle. This is the code I've got so far :

 <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 easy way:

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;

}

adjust padding to change the size of the box.

Answer 2

Instead of using the div as your arrow, try using the div as your rectangle (or circle if desired). You'll need background-color: rgba(0,0,0,0.4) or similar to get the "translucent black" effect.

Once that's done, put your arrow styles in the ::before pseudo-element. Use positioning to get it in the right place, but it should be pretty easy to get the arrow to appear. Don't forget content:'' to make the pseudo-element appear.

Answer 3

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

{ opacity: 0.5;}

Answer 4

You can user pseudo-elements to add the box with no additional markup. As already suggested, use rgba to define the background color.

I made a fiddle with an example showing the result, with 4 arrows in different directions on different background colors: https://jsfiddle.net/7f6tg9s3/4/

Here is the arrows part:

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