CSS Kullanarak Süslü Ok Nasıl Yapılır?

102

Tamam, böylece herkes bunu kullanarak bir üçgen yapabileceğinizi bilir:

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

Ve bu, üçgenle dolu bir katı oluşturur. Peki bunun gibi içi boş ok benzeri bir üçgeni nasıl yaparsınız?

noktada kesişen sadece iki çizgiye sahip bir ok. Büyüktür işareti gibi:>

html css css-shapes

— Tommay
kaynak

3

Döndürülmüş iki dikdörtgen.

— SLaks

51

jsfiddle.net/j08691/a0uogod0

— j08691

5

Çok büyük bir yazı tipi mi kullanıyorsunuz?

— GolezTrol

2

AAAAAHHHH. j08691 anladı. Teşekkürler!

— Tommay

4

@ J08691'i kontrol edin, paranın hakkını oynayın. Bunu başarmanın bir başka yolu da Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right

— crazymatt

93

Sen kullanabilir beforeya da aftersözde elemanı ve ona biraz CSS geçerlidir. Çeşitli yollar var. Her ikisini de ekleyebilir beforeve afterçubuklardan birini oluşturacak şekilde her birini döndürebilir ve konumlandırabilirsiniz. Daha kolay bir çözüm, yalnızca beforeöğeye iki kenarlık eklemek ve bunu kullanarak döndürmektir transform: rotate.

Pseuso öğeleri yerine gerçek bir öğe kullanan farklı bir çözüm için aşağı kaydırın

Bu durumda, okları bir listeye madde imi olarak ekledim ve listenin emyazı tipiyle uygun şekilde boyutlandırmak için boyutları kullandım .

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>

Snippet'i genişlet

Tabii kullanmak gerekmez beforeya aftersiz de normal bir elemana aynı numarayı uygulayabilirsiniz. Yukarıdaki liste için kullanışlıdır, çünkü ek işaretlemeye ihtiyacınız yoktur. Ancak bazen yine de işaretlemeyi isteyebilirsiniz (veya buna ihtiyacınız olabilir). Bunun için bir divveya kullanabilirsiniz spanve hatta insanların i'simgeler' için öğeyi geri dönüştürdüğünü bile gördüm . Böylece bu işaretleme aşağıdaki gibi görünebilir. Bunun için kullanmanın <i>doğru olup olmadığı tartışmalıdır, ancak bunun için span'ı ve güvenli tarafta olmak için kullanabilirsiniz.

/* 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.

Snippet'i genişlet

Daha fazla ilham arıyorsanız, Nicolas Gallagher'ın bu harika saf CSS simgeleri kitaplığına göz atmayı unutmayın . :)

— GolezTrol
kaynak

Bu oldukça iyi çalıştı, ancak değişiklik yapılması gereken birkaç şey var. 1. Metnin geri kalanını onunla birlikte aşağı kaydırmadan oku nasıl hafifçe aşağı hareket ettirebilirim? #Arrow :: after ve sonra bir kenar boşluğu ayarlamayı denedim, ancak bu, metin dahil her şeyi aşağı kaydırdı. 2. Fareyle üzerine gelindiğinde rengi değiştirmek için ona ihtiyacım var. Şu anda yalnızca metin renk değiştiriyor. Hem metni hem de oku nasıl değiştirebilirim?

— Tommay

Okun rengini değiştirmek için border-color, ok aslında bir karakter değil, bir sınır olduğundan, değiştirmeniz gerekecektir . Konumlandırma için, ekleyebilir position: relativeoka ve kullanarak hareket topve left. Hem değiştirilmiş ilk pasajda hem de ikinci pasajda konumlandırmayı gösterdim. Üzerine gelinen liste öğesinin sözde elemanına li:hover::beforeatıfta bulunan hoş kombinasyona dikkat edin before.

— GolezTrol

Aslında bir şey daha var: bu yüzden şimdi bu metni ortalamaya çalışıyorum (after öğesiyle). Sorun şu ki, bu after element görünüşe göre çok fazla görünmez alan kaplıyor ve sonuç olarak metin son derece merkez dışı görünüyor. Bu görünmez alanı nasıl 0'a ayarlardım? Sol: 0 ve sağ: 0 ile birlikte margin-left: 0 ve margin-right: 0'ı denedim, ikisi de işe yaramadı.

— Tommay

Ne demek istediğinizden tam olarak emin değilim, ancak sözde öğenin zaten 0kendi başına bir marjı var , bu nedenle herhangi bir beyaz boşluğu iptal etmek için negatif bir marj gerekir. Örneğin, ikinci parçada, oku bir margin-left: -0.4em;önceki kelimenin yanına boşluk bırakmadan eklemek için ekleyebilirsiniz .

— GolezTrol

Stackoverflow.com/questions/27549099/…

— Tommay

71

Bu, diğer önerilerden çok daha kolay çözülebilir.

Sadece bir kare çizin ve bir borderözelliği sadece 2 birleşen kenara uygulayın.

Ardından, kareyi okun göstermesini istediğiniz yöne göre döndürün, örneğin: 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>

Snippet'i genişlet

— Alan Dunning
kaynak

1

Bu mükemmel cevap, gerçekten kabul edilen cevap olması gerekiyor. Çok basit ve her parçası bir o kadar etkili.

— Andrew Faulkner

@AndrewFaulkner Yardımcı olduğuna sevindim.

— Alan Dunning

38

Duyarlı köşeli çift ayraçlar / oklar

onlar yeniden boyutlandırmak için otomatik olarak metne ve edilir renkli aynı renk. Tak ve çalıştır :)
jsBin demo oyun alanı

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

Snippet'i genişlet

— Roko C. Buljan
kaynak

1

Vay canına, bu sembole "Sağ üst köşe" deniyor ! Güzel. :) Genişlik üzerinde kenarlıktan daha az kontrol, ancak yazı tiplerinin olasılığını göstermek için yine de +1. Diğer semboller için bu bir CSS şekli hilesinden daha iyi olabilir.

— GolezTrol

Kullanıcının yazı tipine sahip olmaması durumunda yazı tipi simgelerinin iyi çalışmayacağını unutmayın; bu nedenle, çoğu sistemde kullanılabilen yazı tiplerine uygun yedeklere sahip olduğunuzdan emin olmanız gerekir. Yazı tipini CSS aracılığıyla indirmeyi de seçebilirsiniz, ancak bunu birkaç simge için yapmak bant genişliği israfıdır. Yine de birçok simgeniz varsa veya bunları kendi stilinizde olmasını istiyorsanız, hepsini kendi simge yazı tipinize eklemeyi ve bunu CSS aracılığıyla yüklemeyi tercih edebilirsiniz. Bu şekilde, bir avuç sembol için büyük yazı tiplerini indirmek zorunda kalmadan doğru yazı tipine sahip olduğunuzdan (neredeyse) emin olursunuz.

— GolezTrol

HTML 4.0'da 38887 karakter içeren toplam bir set kabul edildi. beri v. 6.2.0 September 2012 1Unicode UTF-8karakterleri 110182 sebebiyet ayarlayın ve Şimdi HTML5 ve varsayılan UTF-8 olan ve görünen bizim karakter iyi bakıyor: unicode.org/Public/UNIDATA/UnicodeData.txt

— Roko C. Buljan

Karakterin var olması, gösterilebileceği anlamına gelmez. Göstermek için uygun yazı tipine ihtiyacınız olacak. Cevabınızın ilk sürümündeki karakterlerin başarısız olmasının nedeni budur: çünkü tarayıcımın varsayılan yazı tipi bu karakterleri içermiyordu. Bu nedenle, bunun gibi bir karakter kullanmak için hangi yazı tiplerinin kullanılacağını belirlemeniz ve tüm platformlarda mevcut değilse diğer yazı tiplerine uygun geri dönüşler sağlamanız gerekir. Örneğin \231dkarakter burada bulunabilir, ancak bir Mac veya Android cihazda olmayabilir. HTML sürümü ve yanıt kodlamasının bununla hiçbir ilgisi yoktur.

— GolezTrol

Daha ince yapabilir misin? Çok şişman olmak yerine mi? Yazı tipi ağırlığını değiştirmek hiçbir şey yapmaz.

— James111

14

İşte farklı bir yaklaşım:

1) Çarpma karakterini kullanın: ××

2) Yarısını gizle overflow:hidden

3) Ardından uç için sözde öğe olarak bir üçgen ekleyin.

Buradaki avantaj, dönüşümün gerekli olmamasıdır. (IE8 + 'da çalışacaktır)

VAKTİNİ BOŞA HARCAMAK

.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>

Snippet'i genişlet

— Danield
kaynak

2

Internet explorer, chrome ve firefox'ta çalışır.

— Thomas

11

Sözde öğelerden önce ve sonra kullanın - 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/>

Snippet'i genişlet

— Gildas.Tambo
kaynak

8

Kenarlıkları kullanan ve CSS3 özellikleri içermeyen başka bir yaklaşım :

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>

Snippet'i genişlet

— web-tiki
kaynak

4

>kendisi çok harika bir ok! Başına bir div ekleyin ve biçimlendirin.

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

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

Snippet'i genişlet

— nikael
kaynak

2

Bu bir "büyüktür" sembolü, bir ok değil.

— Mark Knol

@MarkKnol Bunun ve herkesin okunun görünüşü arasındaki fark nedir? Bu benim için en iyi çözüm gibi görünüyor.

— dallin

2

Roko C'yi kullanarak üzerine gelme efektine sahip Sol Sağ Ok

.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>

Snippet'i genişlet

— Vinayakj
kaynak

1

Projemde inputbir oka değiştirmem gerekiyordu . Aşağıda son çalışma var.

#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">

Snippet'i genişlet

İşte Fiddle

— Mostafa
kaynak

Harika kod! Sadece yapması zor olan tek bir element kullanıyor :)

— 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>

Snippet'i genişlet

Roko C'ye benzer, ancak boyut ve yerleşim üzerinde biraz daha fazla kontrol.

— bob
kaynak