Strzałka css, odwrócenie

Question

Siemka.

Mam mały problem ze strzałką. Chce ją odwrócić, ale nie moge sobie z tym poradzić.

https://codepen.io/Apper97/pen/JZJBzG

Answer 1

.button {
   transform: rotate(180deg);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

Comments

okej, dzięki a dałoby sie, aby strzałka dookoła miała border np red? ;)

---

nie ponieważ strzałka, którą wysłałeś jest zrobiona z borderów. zmiana koloru bordera zmieni kolor całej strzałki. Zamiast tego możesz zrobić pseudo element after który będzie dokładnie identyczną strzałką z tym, że będzie powiedzmy 2px większa i będzie koloru czerwonego i będzie pod tą czarną co będzie dawało efekt bordera.

---

Pewnie nie oto Ci chodzi, ale może taki efekt chcesz uzyskać:

.border {
	display:inline-block;
	border:1px solid orange;
}

<span class="border">
	<div class="button"></div>
</span>

Lub:

.button {
	width:0px;
	height:5px;
	border-style:solid;
	border-color:transparent transparent transparent black;
	border-width: 9px 9px 9px 9px;
	position:absolute;
	top:0;
	left:0;
}
.button2 {
	display:block;
	width:0px;
	height:5px;
	border-style:solid;
	border-color:transparent transparent transparent orange;
	border-width: 7px 7px 7px 7px;
	position:absolute;
	top:2px;
	left:1px;
	z-index:100;
}
.hover_for {
	width:18px;
	height:23px;
	border:1px solid green;
}
.hover_for:hover .button2{ 
	transform: rotate(180deg);
	left:3px;
}

.hover_for:hover .button{ 
	transform: rotate(180deg);
} 

body {
	background:grey;
}

<div style="position:relative;margin-left:100px;margin-top:100px;" class="hover_for">
	<div class="button2"></div><div class="button"></div>
</div>