Site icon Trickbd.com

এখন CSS দিয়ে তৈরি করুন অসাধারণ Triangle and Arrows অনেক সহজে।

Unnamed

আসসালামু আলাইকুম।আশা করি আপনারা ভালো আছেন।আমি হাজির হলাম আরো একটি নতুন পোষ্ট নিয়ে।আমি যা শেয়ার করবো তা আপনি যানলে আমি বলবো এই পোষ্ট আপনার জন্য না।

আজ আমি আপনাদের অনেক কিছু Triangle এবং Arrow সম্পর্কে কথা বলবো।যারা ওয়েবসাইট ডিজাইন করে থাকে তাদের জন্য অনেক ধরকারি এসব জিনিন।

আজকের পোষ্ট এ যে Triangle গুলো থাকবে।


1. Triangle Right


2. Triangle Left


3. Triangle Down


4. Triangle Up


5. Oval


6. Circle


আজকের পোষ্ট যে Arrow গুলো থাকবে।


1. Down arrow


2. Up arrow


3. Left arrow


4. Right arrow


যেহেতু এসব CSS দ্বারা তৈরি তাই কোড এর সাথে সাথে Example ও থাকবে।

1. Triangle Right

Code:


Example:

2. Triangle Left

Code:

Example:

3. Triangle Down

Code:


Example:

4. Triangle Up

Code:


Example:

5. Oval

Code:

Example:

6. Circle

Code:


Example:


1. Down arrow

Code:

<span style=”border: solid black;border-width:0 3px 3px 0;
display: inline-block; padding:3px;transform: rotate(45deg); -webkit-transform: rotate(45deg);”></span>

Example:

2. Up arrow

Code:

<span style=”transform: rotate(-135deg); -webkit-transform: rotate(-135deg);border: solid black;border-width:0 3px 3px 0;
display: inline-block; padding:3px;”></span>

Example:

3. Left arrow

Code:

<span style=”transform: rotate(135deg); -webkit-transform: rotate(135deg);border: solid black;border-width:0 3px 3px 0;
display: inline-block; padding:3px;”></span>

Example:

4. Right arrow

Code:

<span style=”transform:rotate(-45deg); -webkit-transform:rotate(-45deg);border: solid black;border-width:0 3px 3px 0;
display: inline-block; padding:3px;”></span>

Example:

তো বন্ধুরা আজ এই পর্যন্তই।দেখা হবে আরো কোনো পোষ্ট এ।আমার যা জানানোর ছিল তা জানালাম আপনাদের।যদি পোষ্টটি ভালো লাগে তাহলে লাইক এবং কমেন্ট করুন।আর যেকোনে নতুন বিষয়ে জানতে ট্রিকবিডি সাথে থাকুন।