Jak zrobić fantazyjną strzałkę za pomocą CSS?

102

Ok, więc wszyscy wiedzą, że możesz utworzyć trójkąt, używając tego:

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

A to tworzy solidny, wypełniony trójkąt. Ale jak zrobić trójkąt w kształcie pustej strzałki, taki jak ten?

strzałka z tylko dwiema liniami, które przecinają się w punkcie. Jak znak większe niż:>

html css css-shapes Tommay
źródło

3

Dwa obrócone prostokąty.

SLaks

51

jsfiddle.net/j08691/a0uogod0

j08691

5

Używasz bardzo dużej czcionki?

GolezTrol

2

AAAAAHHHH. j08691 ma to. Dzięki!

Tommay,

4

Sprawdź @ j08691 Fiddle jego prawo do pieniędzy. Innym sposobem na osiągnięcie tego jest użycie pakietu czcionek, takiego jak Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right

crazymatt

93

Możesz użyć pseudoelementu beforelub afteri zastosować do niego trochę CSS. Jest wiele sposobów. Możesz dodać oba beforei after, i obrócić i ustawić każdy z nich, aby utworzyć jeden z pasków. Łatwiejszym rozwiązaniem jest dodanie dwóch granic do samego beforeelementu i obrócenie go za pomocą transform: rotate.

Przewiń w dół, aby znaleźć inne rozwiązanie, które używa rzeczywistego elementu zamiast elementów pseuso

W tym przypadku dodałem strzałki jako punktory na liście i użyłem emrozmiarów, aby dopasować je do czcionki listy.

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

Rozwiń fragment

Oczywiście nie musisz używać beforelub after, możesz zastosować tę samą sztuczkę również do zwykłego elementu. W przypadku powyższej listy jest to wygodne, ponieważ nie potrzebujesz dodatkowych znaczników. Ale czasami i tak możesz chcieć (lub potrzebować) znaczników. Możesz użyć do tego divlub span, a nawet widziałem, jak ludzie przetwarzają ten ielement na „ikony”. Więc ten znacznik mógłby wyglądać jak poniżej. To, czy użycie <i>do tego jest właściwe, jest dyskusyjne, ale możesz również użyć do tego zakresu, aby być po bezpiecznej stronie.

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}

And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.

Rozwiń fragment

Jeśli szukasz więcej inspiracji, koniecznie sprawdź tę niesamowitą bibliotekę czystych ikon CSS autorstwa Nicolasa Gallaghera . :)

GolezTrol
źródło

To działało całkiem nieźle, ale jest kilka rzeczy, które wymagają modyfikacji. 1. Jak przesunąć strzałkę nieznacznie w dół, nie przesuwając razem z nią reszty tekstu? Wypróbowałem #arrow :: after, a następnie ustawiłem górny margines, ale to przesunęło wszystko w dół, łącznie z tekstem. 2. Potrzebuję zmiany koloru po najechaniu myszą. Obecnie tylko tekst zmienia kolor. Jak mogę zmienić zarówno tekst, jak i strzałkę?

Tommay,

Aby zmienić kolor strzałki, musisz zmienić border-color, ponieważ strzałka nie jest w rzeczywistości znakiem, ale ramką. Aby ustawić pozycję, możesz dodać position: relativestrzałkę i przesuwać ją za pomocą topi left. Pokazałem zarówno w zmodyfikowanym pierwszym fragmencie, jak i pozycjonowanie w drugim fragmencie. Zwróć uwagę na ładną kombinację, li:hover::beforektóra odnosi się do beforepseudoelementu elementu listy najechanej kursorem.

GolezTrol

Właściwie jeszcze jedno: próbuję teraz wyśrodkować ten tekst (z elementem po). Problem polega na tym, że ten element po elemencie najwyraźniej zajmuje dużo niewidocznej przestrzeni, w wyniku czego tekst wydaje się być skrajnie poza środkiem. Jak ustawić tę niewidzialną przestrzeń na 0? Próbowałem left: 0 i right: 0, razem z margin-left: 0 i margin-right: 0, żaden z nich nie działał.

Tommay,

Nie jestem do końca pewien, co masz na myśli, ale pseudoelement już sam ma margines 0, więc do usunięcia wszelkich białych znaków potrzebny byłby margines ujemny. Na przykład w drugim fragmencie możesz dodać, margin-left: -0.4em;aby umieścić strzałkę obok poprzedniego słowa bez spacji.

GolezTrol

Opublikowałem nowe pytanie na stackoverflow.com/questions/27549099/ ...

Tommay

71

Można to rozwiązać znacznie łatwiej niż inne sugestie.

Po prostu narysuj kwadrat i zastosuj borderwłaściwość tylko do dwóch łączących się stron.

Następnie obróć kwadrat zgodnie z kierunkiem, w którym ma wskazywać strzałka, na przykład: transform: rotate(<your degree here>)

.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}

<div class="triangle"></div>

Rozwiń fragment

Alan Dunning
źródło

1

To doskonała odpowiedź, naprawdę musi być akceptowana. Bardzo proste i równie skuteczne.

Andrew Faulkner,

@AndrewFaulkner Cieszę się, że pomogło.

Alan Dunning

38

Czułe szewrony / strzały

ich rozmiar automatycznie z tekstem i są barwione w tym samym kolorze. Podłącz i graj :)
jsBin Demo Playground

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}

This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down

Rozwiń fragment

Roko C. Buljan
źródło

1

Wow, ten symbol faktycznie nazywa się „prawy górny róg” ! Miły. :) Mniejsza kontrola nad szerokością niż w przypadku obramowania, ale wciąż +1 za pokazywanie możliwości czcionek. W przypadku innych symboli może to być lepsze niż sztuczka w kształcie CSS.

GolezTrol

Zauważ, że ikony czcionek nie będą działać dobrze, jeśli użytkownik nie ma czcionki, więc musisz upewnić się, że masz odpowiednie rezerwy czcionek, które są dostępne w większości systemów. Równie dobrze możesz pobrać czcionkę przez CSS, ale marnowanie przepustowości w przypadku kilku ikon. Jeśli jednak masz wiele ikon lub chcesz mieć je w swoim własnym stylu, możesz zdecydować się na dodanie ich wszystkich do własnej czcionki ikony i załadowanie jej przez CSS. W ten sposób masz (prawie) pewność, że masz dostępną odpowiednią czcionkę bez konieczności pobierania ogromnych czcionek dla kilku symboli.

GolezTrol

W HTML 4.0 przyjęto cały zestaw zawierający 38887 znaków. ponieważ liczba znaków v. 6.2.0 September 2012 1Unicode UTF-8wzrosła do 110182, a teraz mając HTML5 i domyślny UTF-8 i wygląda dobrze, nasza postać wygląda dobrze: unicode.org/Public/UNIDATA/UnicodeData.txt

Roko C. Buljan

Fakt, że postać istnieje, nie oznacza, że można ją wyświetlić. Będziesz potrzebować odpowiedniej czcionki, aby to pokazać. To jest powód, dla którego znaki w pierwszej wersji Twojej odpowiedzi zawiodły: ponieważ domyślna czcionka mojej przeglądarki nie zawierała tych znaków. Aby więc użyć takiego znaku, musisz określić, których czcionek użyć, i musisz zapewnić odpowiednie rezerwy dla innych czcionek, jeśli nie są one dostępne na wszystkich platformach. Na przykład \231dpostać może być dostępna tutaj, ale nie na komputerze Mac lub urządzeniu z Androidem. Wersja HTML i kodowanie odpowiedzi nie mają z tym nic wspólnego.

GolezTrol

Czy możesz sprawić, że będzie cieńszy? Zamiast być taki gruby? Zmiana grubości czcionki nic nie robi.

James111,

14

Oto inne podejście:

1) Użyj znaku mnożenia: ××

2) Ukryj połowę za pomocą overflow:hidden

3) Następnie dodaj trójkąt jako pseudoelement końcówki.

Zaletą jest to, że nie są potrzebne żadne przekształcenia. (Będzie działać w IE8 +)

SKRZYPCE

.arrow {
  position: relative;
}
.arrow:before {
  content: '×';
  display: inline-block;
  position: absolute;
  font-size: 240px;
  font-weight: bold;
  font-family: verdana;
  width: 103px;
  height: 151px;
  overflow: hidden;
  line-height: 117px;
}
.arrow:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 101px;
  top: 51px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 24px;
  border-color: transparent transparent transparent black;
}

<div class="arrow"></div>

Rozwiń fragment

Danield
źródło

2

Działa w przeglądarce Internet Explorer, Chrome i Firefox.

Thomas

11

Po prostu użyj pseudoelementów przed i po - CSS

*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}

<div/>

Rozwiń fragment

Gildas.Tambo
źródło

8

Inne podejście wykorzystujące obramowania i brak właściwości CSS3 :

div, div:after{
    border-width: 80px 0 80px 80px;
    border-color: transparent transparent transparent #000;
    border-style:solid;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    left:-115px; top:-80px;
    border-left-color:#fff;
}

<div></div>

Rozwiń fragment

web-tiki
źródło

4

>sama w sobie jest wspaniałą strzałą! Po prostu dodaj do niego element div i nadaj mu styl.

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}

<div class="arrowed">Hatz!</div>

Rozwiń fragment

nicael
źródło

2

To symbol „większego niż”, a nie strzała.

Mark Knol

@MarkKnol Jaka jest różnica między tym a wyglądem strzały innych osób? Wydaje mi się, że to najlepsze rozwiązanie.

dallin

2

Strzałka w lewo w prawo z efektem zawisu przy użyciu sztuczki Roko C. Buljan box-shadow

.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}

<div class="arr left"></div>
<div class="arr right"></div>

Rozwiń fragment

vinayakj
źródło

1

Musiałem zmienić inputstrzałkę w moim projekcie. Poniżej znajduje się praca końcowa.

#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}

<input id="in_submit" type="button" class="convert_btn">

Rozwiń fragment

Tutaj Fiddle

Mostafa
źródło

Świetny kod! Używa tylko jednego elementu, który jest trudny do zrobienia :)

www139,

0

.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div>
  here are some arrows
  <div class='arrow left'></div> space
  <div class='arrow right'></div> space
  <div class='arrow top'></div> space
  <div class='arrow bottom'></div> space with proper spacing?
</div>

Rozwiń fragment

Podobny do Roko C, ale trochę większa kontrola nad rozmiarem i położeniem.

pion
źródło

Jak zrobić fantazyjną strzałkę za pomocą CSS?

Odpowiedzi:

Czułe szewrony / strzały