How to outline arrow in css

Blind Sanji 0
Viewed 53

I've managed to set an outline but it's not going around the arrow but around the whole box. Is there a fix for this?

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  outline: solid black;
  outline-width: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<div class="arrows">
  <i class="arrow down"></i>
</div>

css html
3 Answers

The outline will make an outline to the whole box, if you want the outline to surround only the border, it would be tricky, this might be what you're looking for if you want CSS only solution.

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  box-shadow: 3px 3px 0px 2px black, inset -3px -3px 0px 2px black
}

.arrow:before {
  content: '';
  width: 3px;
  position: absolute;
  left: 0;
  bottom: -15px;
  z-index: 100;
  background: #000;
  height: 16px;
}

.arrow:after {
  content: '';
  width: 16px;
  position: absolute;
  right: -15px;
  top: 0;
  z-index: 100;
  background: #000;
  height: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<div class="arrows">
  <i class="arrow down"></i>
</div>

Damzaky0

I am not sure if this is quite what you are looking for but might be useful starting point.

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  box-shadow: 1px 1px 1px #000;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<div class="arrows">
  <i class="arrow down"></i>
</div>

userhxYp0

you can you ::before & ::after css to achieve this.

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  position: relative;
}

.arrow::after {
  content: '';
  width: 10px;
  height: 100%;
  background-color: #49fb35;
  position: absolute;
  left:0;
  
}
.arrow::before {
  content: '';
  width: 100%;
  height: 10px;
  background-color: #49fb35;
  position: absolute;
  left: 0;
  
}

.arrow::after,
.arrow::before {
  box-shadow: 0px 0px 1px 1px black;
}

.down {
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}
<div class="arrows">
  <i class="arrow down"></i>
</div>

SandyKrish0
Related