Bagaimana Cara Membuat Panah Mewah Menggunakan CSS?

102

Oke, jadi semua orang tahu Anda bisa membuat segitiga menggunakan ini:

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

Dan itu menghasilkan padat, diisi segitiga. Tapi bagaimana Anda akan membuat segitiga seperti panah berlubang, seperti ini?

panah dengan hanya dua garis yang berpotongan pada titik tersebut. Seperti tanda yang lebih besar dari:>

html css css-shapes Besok
sumber

3

Dua persegi panjang yang diputar.

SLaks

51

jsfiddle.net/j08691/a0uogod0

j08691

5

Menggunakan font yang sangat besar?

GolezTrol

2

AAAAAHHHH. j08691 mengerti. Terima kasih!

Besok

4

Cek @ j08691 Biola haknya atas uang. Cara lain untuk mencapai hal ini adalah dengan menggunakan paket font seperti Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right

crazymatt

93

Anda dapat menggunakan beforeatau afterpseudo-element dan menerapkan beberapa CSS padanya. Ada berbagai cara. Anda dapat menambahkan beforedan after, serta memutar dan memposisikan masing-masing untuk membentuk salah satu batang. Solusi yang lebih mudah adalah menambahkan dua batas hanya ke beforeelemen dan memutarnya menggunakan transform: rotate.

Gulir ke bawah untuk solusi berbeda yang menggunakan elemen sebenarnya, bukan elemen pseuso

Dalam hal ini, saya telah menambahkan panah sebagai peluru dalam daftar dan menggunakan emukuran untuk membuatnya berukuran sesuai dengan font daftar.

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>

Luaskan cuplikan

Tentu saja Anda tidak perlu menggunakan beforeatau after, Anda dapat menerapkan trik yang sama ke elemen normal juga. Untuk daftar di atas lebih mudah, karena Anda tidak memerlukan markup tambahan. Tetapi terkadang Anda mungkin menginginkan (atau membutuhkan) markup. Anda dapat menggunakan a divatau spanuntuk itu, dan saya bahkan telah melihat orang-orang bahkan mendaur ulang ielemen untuk 'ikon'. Jadi markup itu bisa terlihat seperti di bawah ini. Apakah menggunakan <i>untuk ini benar masih bisa diperdebatkan, tetapi Anda dapat menggunakan rentang untuk ini juga agar berada di sisi yang aman.

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

Luaskan cuplikan

Jika Anda mencari lebih banyak inspirasi, pastikan untuk memeriksa perpustakaan ikon CSS murni yang mengagumkan ini oleh Nicolas Gallagher . :)

GolezTrol
sumber

Ini bekerja dengan cukup baik tetapi ada beberapa hal yang perlu dimodifikasi. 1. Bagaimana cara memindahkan panah ke bawah sedikit tanpa memindahkan sisa teks ke bawah? Saya mencoba #arrow :: after dan kemudian mengatur margin-top, tetapi itu memindahkan semuanya ke bawah, termasuk teks. 2. Saya membutuhkannya untuk mengubah warna saat gerakan mouse. Saat ini, hanya teks yang berubah warna. Bagaimana cara mengubah teks dan panah?

Besok

Untuk mengubah warna panah, Anda perlu mengubah border-color, karena panah sebenarnya bukan karakter tetapi perbatasan. Untuk pemosisian, Anda dapat menambahkan position: relativepanah dan memindahkannya menggunakan topdan left. Saya telah menunjukkan keduanya di potongan pertama yang dimodifikasi, dan juga posisi di potongan kedua. Perhatikan kombinasi bagus li:hover::beforeyang mengacu pada beforeelemen semu dari item daftar yang di-hover.

GolezTrol

Sebenarnya, satu hal lagi: jadi saya mencoba untuk memusatkan teks ini sekarang (dengan elemen setelah). Masalahnya adalah bahwa elemen setelah ini tampaknya mengambil banyak ruang tak terlihat, dan akibatnya teks tampak sangat tidak tepat di tengah. Bagaimana saya menyetel ruang tak terlihat itu ke 0? Saya mencoba kiri: 0 dan kanan: 0, bersama dengan margin kiri: 0 dan margin kanan: 0, tidak ada yang berhasil.

Besok

Saya tidak begitu yakin apa yang Anda maksud, tetapi pseudo-element sudah memiliki margin 0dengan sendirinya, jadi Anda memerlukan margin negatif untuk menghapus spasi kosong. Misalnya di potongan kedua, Anda dapat menambahkan margin-left: -0.4em;untuk meletakkan panah di sebelah kata sebelumnya tanpa spasi.

GolezTrol

Saya memposting pertanyaan baru di stackoverflow.com/questions/27549099/…

Besok

71

Ini bisa diselesaikan jauh lebih mudah daripada saran lainnya.

Cukup gambar persegi dan terapkan borderproperti ke hanya 2 sisi yang saling bergabung.

Kemudian putar persegi sesuai dengan arah yang Anda ingin panah tunjuk, misalnya: 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>

Luaskan cuplikan

Alan Dunning
sumber

1

Ini adalah jawaban yang sempurna, harus menjadi jawaban yang diterima. Sangat sederhana, dan sama efektifnya.

Andrew Faulkner

@Andulkner Senang itu membantu.

Alan Dunning

38

Tanda Pangkat / Tanda Panah Responsif

mereka mengubah ukurannya secara otomatis dengan teks Anda dan diwarnai dengan warna yang sama. Pasang dan mainkan :)
taman bermain demo jsBin

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

Luaskan cuplikan

Roko C. Buljan
sumber

1

Wah, simbol itu sebenarnya disebut "Pojok kanan atas" ! Bagus. :) Kontrol lebar kurang dari dengan batas, tapi masih +1 untuk menunjukkan kemungkinan font. Untuk simbol lain ini mungkin lebih baik daripada trik bentuk CSS.

GolezTrol

Perhatikan bahwa ikon font tidak akan berfungsi dengan baik jika pengguna tidak memiliki font tersebut, jadi Anda harus memastikan untuk memiliki penggantian yang tepat ke font yang tersedia untuk sebagian besar sistem. Anda mungkin juga memilih untuk mengunduh font melalui CSS, tetapi membuang-buang bandwidth untuk melakukannya untuk beberapa ikon. Jika Anda memiliki banyak ikon, atau Anda ingin memilikinya dengan gaya Anda sendiri, Anda dapat memilih untuk menambahkan semuanya ke font ikon Anda sendiri dan memuatnya melalui CSS. Dengan cara itu Anda (hampir) yakin memiliki font yang tepat tersedia tanpa harus mendownload font yang besar untuk beberapa simbol.

GolezTrol

Kembali ke HTML 4.0, satu set total diadopsi dengan memegang 38887 karakter. karena karakter v. 6.2.0 September 2012 1Unicode UTF-8ditetapkan ke 110182, dan Sekarang memiliki HTML5 dan UTF-8 default dan terlihat karakter kita terlihat bagus: unicode.org/Public/UNIDATA/UnicodeData.txt

Roko C. Buljan

Fakta bahwa karakter itu ada bukan berarti bisa ditampilkan. Anda membutuhkan font yang tepat untuk menampilkannya. Itulah alasan mengapa karakter dalam versi pertama jawaban Anda gagal: karena font default browser saya tidak menyertakan karakter tersebut. Jadi untuk menggunakan karakter seperti ini, Anda perlu menentukan font mana yang akan digunakan, dan Anda harus memberikan fallback yang tepat ke font lain jika tidak tersedia di semua platform. Misalnya \231dkarakter mungkin tersedia di sini, tetapi tidak di Mac atau perangkat Android. Versi HTML dan pengkodean respons tidak ada hubungannya dengan itu.

GolezTrol

Bisakah kamu membuatnya lebih tipis? Bukannya jadi gemuk? Mengubah font-weight tidak berarti apa-apa.

Yakobus111

14

Berikut pendekatan yang berbeda:

1) Gunakan karakter perkalian: ××

2) Sembunyikan setengahnya dengan overflow:hidden

3) Kemudian tambahkan segitiga sebagai elemen semu untuk ujungnya.

Keuntungannya di sini adalah tidak diperlukan transformasi. (Ini akan bekerja di IE8 +)

BIOLA

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

Luaskan cuplikan

Danield
sumber

2

Berfungsi di Internet explorer, chrome dan firefox.

Thomas

11

Cukup gunakan sebelum dan sesudah Pseudo-elements - 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/>

Luaskan cuplikan

Gildas.Tambo
sumber

8

Pendekatan lain menggunakan batas dan tanpa properti 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>

Luaskan cuplikan

web-tiki
sumber

4

>itu sendiri adalah panah yang sangat indah! Tambahkan saja div dengan itu dan beri gaya.

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

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

Luaskan cuplikan

nicael
sumber

2

Itu simbol "lebih besar dari", bukan panah.

Mark Knol

@MarkKnol Apa perbedaan antara ini dan tampilan panah orang lain? Ini tampaknya menjadi solusi terbaik bagi saya.

dallin

2

Panah Kiri Kanan dengan efek hover menggunakan trik box-shadow Roko C. Buljan

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

Luaskan cuplikan

vinayakj
sumber

1

Saya perlu mengubah inputmenjadi panah dalam proyek saya. Di bawah ini adalah pekerjaan terakhir.

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

Luaskan cuplikan

Ini Fiddle

Mostafa
sumber

Kode yang luar biasa! Ini hanya menggunakan satu elemen yang sulit dilakukan :)

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>

Luaskan cuplikan

Mirip dengan Roko C, tetapi sedikit lebih mengontrol ukuran dan penempatan.

bob
sumber

Bagaimana Cara Membuat Panah Mewah Menggunakan CSS?

Jawaban:

Tanda Pangkat / Tanda Panah Responsif