CSS का उपयोग करके एक फैंसी एरो कैसे बनाएं?

Question

ठीक है, इसलिए हर कोई जानता है कि आप इसका उपयोग करके एक त्रिकोण बना सकते हैं:

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

और वह एक ठोस पैदा करता है, जो त्रिकोण में भरा होता है। लेकिन आप इस तरह से एक खोखले-प्रकार के तीर-जैसा त्रिकोण कैसे बनाएंगे?

Comments

दो घुमाए गए आयत।

— SLACs

jsfiddle.net/j08691/a0uogod0

— j08691

एक बहुत बड़े फ़ॉन्ट का उपयोग?

— GolezTrol

AAAAAHHHH। j08691 को मिल गया। धन्यवाद!

— टॉमी

चेक @ j08691 पैसे पर अपना अधिकार फिड करें। एक और तरीका है इस लक्ष्य को हासिल करने के लिए बहुत बढ़िया फ़ॉन्ट्स तरह एक फ़ॉन्ट पैक का उपयोग करने के लिए है fortawesome.github.io/Font-Awesome/icon/chevron-right

— crazymatt

Answer 1

आप beforeया afterछद्म तत्व का उपयोग कर सकते हैं और इसके लिए कुछ CSS लागू कर सकते हैं। इसके विभिन्न तरीके हैं। आप दोनों को जोड़ सकते हैं beforeऔर after, और बारी बारी से और स्थिति उनमें से प्रत्येक के बार में से एक के रूप में। एक आसान समाधान सिर्फ beforeतत्व में दो सीमाओं को जोड़ रहा है और इसका उपयोग करके घुमाता है transform: rotate।

एक अलग समाधान के लिए नीचे स्क्रॉल करें जो pseuso तत्वों के बजाय एक वास्तविक तत्व का उपयोग करता है

इस स्थिति में, मैंने एक सूची में तीर को गोलियों के रूप में जोड़ा है और emआकार का उपयोग करके उन्हें सूची के फ़ॉन्ट के साथ ठीक से आकार दिया है।

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>

बेशक आपको उपयोग करने की आवश्यकता नहीं है beforeया after, आप एक ही तत्व को एक सामान्य तत्व पर भी लागू कर सकते हैं। ऊपर की सूची के लिए यह सुविधाजनक है, क्योंकि आपको अतिरिक्त मार्कअप की आवश्यकता नहीं है। लेकिन कभी-कभी आप वैसे भी मार्कअप (या जरूरत) कर सकते हैं। आप एक divया उसके spanलिए उपयोग कर सकते हैं , और मैंने लोगों को यहां तक ​​कि रीसायकल भी करते देखा हैi 'आइकन्स' के लिए तत्व को । ताकि मार्कअप नीचे की तरह दिख सके। इसके <i>लिए उपयोग करना सही है या नहीं यह बहस का मुद्दा है, लेकिन आप इसके लिए स्पैन का उपयोग कर सकते हैं और साथ ही सुरक्षित पक्ष पर रहने के लिए।

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

यदि आप अधिक प्रेरणा चाहते हैं, तो शुद्ध के इस भयानक पुस्तकालय की जांच करना सुनिश्चित करें निकोलस गैलाघेर द्वारा सीएसएस आइकन के । :)

Comments

यह बहुत अच्छी तरह से काम किया है, लेकिन कुछ चीजें हैं जिन्हें संशोधन की आवश्यकता है। 1. मैं बाकी पाठ को इसके साथ नीचे ले जाए बिना तीर को थोड़ा नीचे कैसे ले जाऊंगा? मैंने # गौरैया की कोशिश की: बाद में और फिर एक मार्जिन-टॉप सेट किया, लेकिन वह सब कुछ नीचे चला गया, जिसमें पाठ भी शामिल था। 2. मुझे माउसओवर पर रंग बदलने की आवश्यकता है। अभी, केवल पाठ रंग बदलता है। मुझे पाठ और तीर दोनों को कैसे बदलना होगा?

— टॉमी

तीर का रंग बदलने के लिए, आपको बदलने की आवश्यकता होगी border-color, क्योंकि तीर एक चरित्र नहीं बल्कि एक सीमा है। स्थिति के लिए, आप जोड़ सकते हैं position: relativeतीर करने के लिए और इसे का उपयोग चारों ओर ले जाने topऔर left। मैंने दोनों को पहले संशोधित किए गए स्निपेट में और दूसरी स्निपेट में स्थिति को दिखाया है। अच्छे संयोजन पर ध्यान दें li:hover::beforeजो beforeहॉवरेड सूची आइटम के छद्म तत्व को संदर्भित करता है ।

— गोलजट्रोल

वास्तव में, एक और बात: इसलिए मैं अब इस पाठ को केंद्र में रखने की कोशिश कर रहा हूं (तत्व के बाद)। समस्या यह है कि यह तत्व स्पष्ट रूप से अदृश्य जगह का एक बहुत ऊपर ले जा रहा है, और परिणामस्वरूप पाठ बेहद ऑफ-सेंटर प्रतीत होता है। मैं उस अदृश्य स्थान को 0 में कैसे सेट करूंगा? मैंने बाएं: 0 और दाएं: 0 की कोशिश की, मार्जिन-लेफ्ट: 0 और मार्जिन-राइट: 0 के साथ, न तो काम किया।

— टॉमी

मुझे बिल्कुल यकीन नहीं है कि आपका क्या मतलब है, लेकिन छद्म तत्व में पहले 0से ही खुद का मार्जिन है, इसलिए आपको किसी भी व्हाट्सएप को रद्द करने के लिए एक नकारात्मक मार्जिन की आवश्यकता होगी। उदाहरण के लिए दूसरे स्निपेट में, आप margin-left: -0.4em;बिना किसी स्थान के पिछले शब्द के बगल में तीर डाल सकते हैं ।

— GolezTrol

मैंने stackoverflow.com/questions/27549099/…

— टॉमी

Answer 2

यह अन्य सुझावों की तुलना में बहुत आसान हल किया जा सकता है।

बस एक वर्ग बनाएं और borderकेवल 2 जुड़ने वाले पक्षों के लिए एक संपत्ति लागू करें ।

फिर उस दिशा के अनुसार वर्ग को घुमाएं, जिसे आप तीर के लिए इंगित करना चाहते हैं: 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>

Comments

यह सही उत्तर है, इसे वास्तव में स्वीकार करने की आवश्यकता है। बहुत सरल, और हर बिट प्रभावी के रूप में।

— एंड्रयू फॉल्कनर

@AndrewFaulkner इसे मदद मिली।

— एलन डनिंग

Answer 3

उत्तरदायी शेवरॉन / तीर

वे आकार बदलने के अपने साथ स्वचालित रूप से पाठ कर रहे हैं और रंग का एक ही रंग। प्लग एंड प्ले :)
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

Comments

वाह, उस प्रतीक को वास्तव में "टॉप राइट कॉर्नर" कहा जाता है ! अच्छा लगा। :) एक सीमा के साथ चौड़ाई पर कम नियंत्रण, लेकिन फोंट की संभावना दिखाने के लिए अभी भी +1। अन्य प्रतीकों के लिए यह सीएसएस आकार की चाल से बेहतर हो सकता है।

— गोलेज़्रोल १५'१४ को

ध्यान दें कि यदि उपयोगकर्ता के पास फ़ॉन्ट नहीं है, तो फॉन्ट आइकन अच्छी तरह से काम नहीं करेंगे, इसलिए आपको उन फोंटों को उचित रूप से कम करना होगा जो अधिकांश सिस्टम के लिए उपलब्ध हैं। आप सीएसएस के माध्यम से फ़ॉन्ट को डाउनलोड करने के लिए चुन सकते हैं, लेकिन यह कुछ हद तक बैंडविड्थ की बर्बादी है जो कि कुछ आइकन के लिए है। यदि आपके पास कई आइकन हैं, हालांकि, या आप उन्हें अपनी शैली में रखना चाहते हैं, तो आप उन सभी को अपने आइकन फ़ॉन्ट में जोड़ने और CSS के माध्यम से लोड करने का विकल्प चुन सकते हैं। इस तरह से आप (लगभग) सही प्रतीक उपलब्ध होने के बारे में निश्चित हैं, जो मुट्ठी भर प्रतीकों के लिए विशाल फ़ॉन्ट डाउनलोड किए बिना उपलब्ध हैं।

— गोलेज़ट्रॉल

वापस HTML 4.0 में कुल सेट 38887 वर्णों को अपनाया गया था। चूंकि v. 6.2.0 September 2012 1यूनिकोड UTF-8वर्ण 110182 तक बढ़ गया है, और अब HTML5 और डिफ़ॉल्ट UTF-8 है और हमारा चरित्र अच्छा दिख रहा है: unicode.org/Public/UNIDATA/UnicodeData.txt

— Roko C. Bulon

तथ्य यह है कि चरित्र मौजूद है इसका मतलब यह प्रदर्शित नहीं किया जा सकता है। आपको इसे दिखाने के लिए उचित फ़ॉन्ट की आवश्यकता होगी। यही कारण है कि आपके उत्तर के पहले संस्करण में वर्ण विफल रहे: क्योंकि मेरे ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट में वे वर्ण शामिल नहीं थे। तो इस तरह से एक चरित्र का उपयोग करने के लिए, आपको यह निर्दिष्ट करने की आवश्यकता होगी कि कौन से फ़ॉन्ट का उपयोग करना है, और यदि आप सभी प्लेटफार्मों पर उपलब्ध नहीं हैं, तो आपको अन्य फोंट को उचित कमियां प्रदान करनी चाहिए। उदाहरण के लिए \231dचरित्र यहाँ उपलब्ध हो सकता है, लेकिन मैक या Android डिवाइस पर नहीं। HTML संस्करण और प्रतिक्रिया एन्कोडिंग का इससे कोई लेना-देना नहीं है।

— गोलेज़्रोल १६'१४

क्या आप इसे पतला बना सकते हैं? इसके बजाय यह इतना मोटा हो रहा है? फ़ॉन्ट-वज़न बदलना कुछ भी नहीं करता है।

— जेम्स ११

Answer 4

यहाँ एक अलग दृष्टिकोण है:

1) गुणन वर्ण का उपयोग करें: ××

2) इसके साथ आधा छिपाएं overflow:hidden

3) फिर टिप के लिए छद्म तत्व के रूप में एक त्रिकोण जोड़ें।

यहाँ लाभ यह है कि कोई भी परिवर्तन आवश्यक नहीं है। (यह IE8 + में काम करेगा)

बेला

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

Comments

इंटरनेट एक्सप्लोरर, क्रोम और फ़ायरफ़ॉक्स में काम करता है।

— थॉमस

Answer 5

बस छद्म तत्वों से पहले और बाद का उपयोग करें - सीएसएस

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

Answer 6

सीमाओं और कोई 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>

Answer 7

>बहुत ही अद्भुत तीर है! बस इसके साथ एक div prepend करें और इसे स्टाइल करें।

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

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

Comments

एक "अधिक से अधिक" प्रतीक है, न कि एक तीर।

— मार्क नॉल

@MarkKnol इसमें क्या अंतर है और हर किसी का तीर कैसे दिखता है? यह मुझे अब तक का सबसे अच्छा समाधान लगता है।

— dallin

Answer 8

रोको सी। बुल्जन बॉक्स-शैडो ट्रिक का उपयोग करके होवर इफेक्ट के साथ लेफ्ट राइट एरो

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

Answer 9

मुझे inputअपनी परियोजना में एक तीर को बदलने की आवश्यकता थी । नीचे अंतिम काम है।

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

यहाँ फिडल

Comments

बहुत बढ़िया कोड! यह केवल एक तत्व का उपयोग करता है जो करना मुश्किल है :)

— www139

Answer 10

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

रोको सी के समान, लेकिन आकार और प्लेसमेंट पर थोड़ा अधिक नियंत्रण।