সিএসএস ব্যবহার করে কীভাবে অভিনব তীর তৈরি করবেন?

Question

ঠিক আছে, সুতরাং সকলেই জানেন যে আপনি এটি ব্যবহার করে একটি ত্রিভুজ তৈরি করতে পারেন:

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

এবং এটি একটি শক্ত, ত্রিভুজ ভরা উত্পাদন। তবে আপনি কীভাবে এই ফাঁকা ধরণের তীরের মতো ত্রিভুজ তৈরি করবেন?

Comments

দুটি ঘোরানো আয়তক্ষেত্র

— স্লাকস

jsfiddle.net/j08691/a0uogod0

— j08691

খুব বড় ফন্ট ব্যবহার করছেন?

— GolezTrol

AAAAAHHHH। j08691 পেয়েছে। ধন্যবাদ!

— টম্মে

@ J08691 টাকার উপরে ডানদিকে ফিডল পরীক্ষা করুন। আরেকটি উপায় এই অর্জন করার জট্টিল ফন্ট মত একটি ফন্ট প্যাক ব্যবহার করা fortawesome.github.io/Font-Awesome/icon/chevron-right

— crazymatt

Answer 1

আপনি beforeবা afterছদ্ম-উপাদানটি ব্যবহার করতে পারেন এবং এতে কিছু সিএসএস প্রয়োগ করতে পারেন। বিভিন্ন উপায় আছে। আপনি উভয় beforeএবং যোগ করতে পারেন afterএবং বারগুলির মধ্যে একটি তৈরি করতে তাদের প্রতিটিকে ঘোরানো এবং অবস্থান করতে পারেন। একটি সহজ সমাধান কেবলমাত্র beforeউপাদানটিতে দুটি সীমানা যুক্ত করছে এবং এটি ব্যবহার করে ঘোরানো transform: rotate।

ভিন্ন সমাধানের জন্য নীচে স্ক্রোল করুন যা সিউসো উপাদানগুলির পরিবর্তে একটি আসল উপাদান ব্যবহার করে

এই ক্ষেত্রে, আমি তালিকায় বুলেট হিসাবে তীরগুলি যুক্ত করেছি এবং তালিকার 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

এটি বেশ ভাল কাজ করেছে তবে কয়েকটি জিনিস রয়েছে যা পরিবর্তনের প্রয়োজন। ১. বাকি পাঠ্যটি নিচে না রেখে আমি কীভাবে তীরটিকে কিছুটা নীচে সরিয়ে নেব? আমি # অ্যারো :: পরে এবং তারপরে একটি মার্জিন-শীর্ষ স্থাপনের চেষ্টা করেছি, তবে এটি পাঠ্য সহ সমস্ত কিছুই সরিয়ে নিয়েছে। ২. মাউসওভারের রঙ বদলাতে আমার এটি দরকার। এই মুহূর্তে, শুধুমাত্র পাঠ্য রঙ পরিবর্তন করে। আমি কীভাবে পাঠ্য এবং তীর পরিবর্তন করব?

— টম্মে

তীরটির রঙ পরিবর্তন করতে, আপনাকে পরিবর্তন করতে হবে border-color, যেহেতু তীরটি একটি অক্ষর নয় বরং একটি সীমানা। পজিশনিংয়ের জন্য, আপনি position: relativeতীরটিতে যুক্ত করতে এবং এটি ব্যবহার করে topএবং এটিকে ঘিরে রাখতে পারেন left। আমি উভয়কে সংশোধিত প্রথম স্নিপেটে এবং দ্বিতীয় স্নিপেটেও অবস্থান প্রদর্শন করেছি shown দুর্দান্ত সংমিশ্রণটি নোট করুন li:hover::beforeযা beforeএকটি আটকানো তালিকার আইটেমের সিউডো-উপাদানকে বোঝায় ।

— গোলজেট্রোল

প্রকৃতপক্ষে, আরও একটি জিনিস: সুতরাং আমি এখন এই পাঠ্যটি কেন্দ্রের চেষ্টা করছি (পরবর্তী উপাদান সহ)। সমস্যাটি হ'ল উপাদানটির পরে এটি দৃশ্যত প্রচুর অদৃশ্য স্থান গ্রহণ করছে এবং ফলস্বরূপ পাঠ্যটি অত্যন্ত অফ-সেন্টার বলে মনে হয়। আমি কীভাবে সেই অদৃশ্য জায়গাটিকে 0 তে সেট করব? আমি প্রান্তিক-বাম: 0 এবং মার্জিন-ডান: 0 সহ বাম: 0 এবং ডান: 0 চেষ্টা করেছি, কোনওটিই কাজ করে না।

— টম্মে

আপনি কী বলতে চাইছেন তা আমি ঠিক নিশ্চিত নই, তবে ছদ্ম-উপাদানটির ইতিমধ্যে একটি মার্জিন রয়েছে 0, সুতরাং কোনও সাদা স্থানকে বাতিল করতে আপনার নেতিবাচক মার্জিনের প্রয়োজন হবে। উদাহরণস্বরূপ দ্বিতীয় স্নিপেটে, আপনি margin-left: -0.4em;কোনও স্থান ছাড়াই পূর্ববর্তী শব্দের পাশে তীরটি যুক্ত করতে পারেন।

— GolezTrol

আমি একটি নতুন প্রশ্ন পোস্ট stackoverflow.com/questions/27549099/...

— Tommay

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

এটি সঠিক উত্তর, এটি সত্যিকারের গ্রহণযোগ্য হওয়া দরকার। খুব সহজ, এবং প্রতিটি বিট হিসাবে কার্যকর।

— অ্যান্ড্রু ফকনার

@ অ্যান্ড্রুফৌলকনার খুশি এটি সহায়তা করেছে।

— অ্যালান ডানিং

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। অন্যান্য চিহ্নগুলির জন্য এটি কোনও সিএসএস শেপ ট্রিকের চেয়ে ভাল be

— গোলেজট্রোল

নোট করুন যে ব্যবহারকারীর ফন্ট না থাকলে ফন্ট আইকনগুলি ভালভাবে কাজ করবে না, তাই আপনাকে অবশ্যই বেশিরভাগ সিস্টেমে উপলব্ধ ফন্টগুলিতে সঠিক ফলব্যাকগুলি নিশ্চিত করতে হবে। আপনি সিএসএসের সাহায্যে ফন্টটি ডাউনলোড করতেও পছন্দ করতে পারেন তবে বেশ কয়েকটি আইকন ব্যবহার করে ব্যান্ডউইথের অপচয় করা। আপনার যদি অনেকগুলি আইকন থাকে তবে আপনি তাদের নিজের স্টাইলে রাখতে চান, তবে সেগুলি আপনার নিজের আইকন ফন্টে যুক্ত করার এবং সিএসএসের মাধ্যমে লোড করার বিকল্প বেছে নিতে পারেন। এই উপায়ে আপনি (প্রায়) বেশ কয়েকটি চিহ্নের জন্য বিশাল ফন্ট ডাউনলোড না করে সঠিক ফন্টটি পাওয়া সম্পর্কে নিশ্চিত।

— গোলেজট্রোল

এইচটিএমএল ৫.০ এ ফিরে মোট সেট 38387 অক্ষর ধারণ করে গৃহীত হয়েছিল। যেহেতু v. 6.2.0 September 2012 1ইউনিকোডের UTF-8অক্ষরগুলি 110182 এ উঠেছে, এবং এখন এইচটিএমএল 5 এবং ডিফল্ট ইউটিএফ -8 রয়েছে এবং আমাদের অক্ষরটি দেখতে ভাল দেখাচ্ছে: ইউনিকোড.অর্গ

— রোকো সি।

চরিত্রটি বিদ্যমান রয়েছে তার অর্থ এটি প্রদর্শিত হতে পারে। এটি প্রদর্শনের জন্য আপনার সঠিক ফন্টের প্রয়োজন হবে। আপনার উত্তরের প্রথম সংস্করণে অক্ষরগুলি ব্যর্থ হওয়ার কারণ এটি ছিল: কারণ আমার ব্রাউজারের ডিফল্ট ফন্টে এই অক্ষরগুলি অন্তর্ভুক্ত করা হয়নি। সুতরাং এর মতো একটি চরিত্রটি ব্যবহার করতে, আপনাকে কোন ফন্টগুলি ব্যবহার করতে হবে তা নির্দিষ্ট করতে হবে এবং অন্য ফন্টগুলি যদি সমস্ত প্ল্যাটফর্মগুলিতে উপলব্ধ না হয় তবে আপনাকে অবশ্যই যথাযথ ফলব্যাকগুলি সরবরাহ করতে হবে। উদাহরণস্বরূপ \231dঅক্ষরটি এখানে উপলভ্য হতে পারে তবে কোনও ম্যাক বা অ্যান্ড্রয়েড ডিভাইসে নয়। এইচটিএমএল সংস্করণ এবং প্রতিক্রিয়া এনকোডিং এর সাথে কিছুই করার নেই।

— গোলেজট্রোল

আপনি এটি আরও পাতলা করতে পারেন? এর বদলে এত মোটা হচ্ছে? হরফ-ওজন পরিবর্তন করে কিছু হয় না।

— জেমস 111

Answer 4

এখানে একটি পৃথক পদ্ধতির:

1) গুণক অক্ষর ব্যবহার করুন: ××

২) এর অর্ধেকটি লুকান 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{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}

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

Comments

একটি তীর নয়, একটি "বৃহত্তর" প্রতীক রয়েছে।

— মার্ক নোল

@ মারককনল এই এবং অন্য সবার তীরটি কেমন দেখাচ্ছে এর মধ্যে ভিন্নতা কী? এটি আমার কাছে এখনও সেরা সমাধান বলে মনে হচ্ছে।

— ডালিন

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>

রোকো সি এর মতো, তবে আকার এবং স্থানের উপর আরও কিছুটা নিয়ন্ত্রণ।