Ne kadar Süslü Bir Ok CSS Kullanarak Yapmak için?

SORU

15 Aralık 2014, PAZARTESİ

Ne kadar Süslü Bir Ok CSS Kullanarak Yapmak için?

Tamam, herkes bir üçgen bu kullanarak yapabilirsiniz bilir:

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

Ve bir katı, Üçgen dolu üretir. Ama nasıl böyle içi boş tip ok gibi bir üçgen, yapar mıydınız?

an arrow with only two lines that intersect at the point. Like a greater than sign: >

CEVAP

15 Aralık 2014, PAZARTESİ

before ya after-element sahte ve CSS geçerlidir. Çeşitli yolları vardır. before after, hem de ekleyin ve çevirin ve her bir bar için bir form yerleştirebilirsiniz. Daha kolay bir çözüm before sadece bu eleman için iki sınır ekleme ve transform: rotate kullanarak döndürün.

Bu durumda, bir liste mermi gibi ok eklendi em boyutları onları düzgün listesinin yazı tipi boyutunu yapmak için kullandım.

ul {
    list-style: none;
}

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

li::before {
    position: relative;
    top: 3pt;
    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>

Elbette before kullanmana gerek yok ya da after aynı numarayı normal bir eleman için de geçerli olacaktır. Yukarıdaki listeye ek biçimlendirme gerek yok, çünkü çok uygundur. Ama bazen (ya) biçimlendirme neyse isteyebilirsiniz. Bunun için div span kullanabilirsiniz, ve hatta insanlar için bile i öğe geri dönüşüm gördüm 'simge'. Bu işaretleme aşağıdaki gibi görünmesi. Bunun için <i> kullanma hakkı olup olmadığı tartışılır, ama bu yayılma için de güvenli tarafta olmak için kullanabilirsiniz.

-Düzenle - yorum istedi, çünkü oku biraz indirdim.

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

/* Additional formatting for arrow icon */
i.arrow {
    top: 2pt;
    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.
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.

Eğer daha fazla ilham arıyorsan, saf bu müthiş kütüphane CSS icons by Nicolas Gallagher check out emin olun. :)

Bunu Paylaş: