How to outline arrow in css-CodePudding

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 >
  <i ></i>
</div>

CodePudding user response：

I think you can't do it using css. Better solution is find suitable icon or svg.

CodePudding user response：

Probably a better way than this but you could use a pseudo element with some padding:

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

.arrow {
  border: solid #000000;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 25px 35px 35px 25px;
  position: relative;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<div >
  <i ></i>
</div>

CodePudding user response：

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 >
  <i ></i>
</div>