CODEWITHSUNDEEP
htmlcss
user5239650
user5239650

Reputation:

semi-transparent rectangle behind css arrow

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

Upvotes: 0

Views: 479

Answers (4)

Elder
Elder

Reputation: 41

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

Upvotes: 0

WIWIWWIISpitFire
WIWIWWIISpitFire

Reputation: 1549

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.

Upvotes: 1

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

set css property to your rectangle div or any shape as,

{ opacity: 0.5;}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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.

Upvotes: 0

Related Questions