semi-transparent rectangle behind css arrow - html

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

set css property to your rectangle div or any shape as,
{ 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;
}