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

আজ আমি আপনাদের অনেক কিছু 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: </p><div class="trickbd-ad inside-post-ad inside_posts_p_1_ad_code" style="margin-top: 10px; margin-bottom: 10px"><div class="g-ytsubscribe" data-channelid="UC3OTCCJNrjyPhcRFzLPYd3g" data-layout="full" data-theme="dark" data-count="default"></div> <!-- <script id="GNR11814"> (function (i,g,b,d,c) { i[g]=i[g]||function(){(i[g].q=i[g].q||[]).push(arguments)}; var s=d.createElement(b);s.async=true;s.src=c; var x=d.getElementsByTagName(b)[0]; x.parentNode.insertBefore(s, x); })(window,'gandrad','script',document,'//content.green-red.com/lib/display.js'); gandrad({siteid:4387,slot:11814}); </script> End of G&R_300x250 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3835532944205431" data-ad-slot="6270061085"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div style="width: 0;height: 0;border-top: 25px solid transparent;border-left: 50px solid #555;border-bottom: 25px solid transparent"></div> <p>
Example:

2. Triangle Left

Code: </p> <div style="width: 0;height: 0;border-top: 25px solid transparent;border-right: 50px solid #555;border-bottom: 25px solid transparent"></div> <p>

Example:

3. Triangle Down

Code: </p> <div style="width: 0;height: 0;border-left: 25px solid transparent;border-right: 25px solid transparent;border-top: 50px solid #555"></div> <p>
Example:

4. Triangle Up

Code: </p> <div style="width: 0;height: 0;border-left: 25px solid transparent;border-right: 25px solid transparent;border-bottom: 50px solid #555"></div> <p>
Example:

5. Oval

Code: </p> <div style="height: 50px;width: 100px;background-color: #555;border-radius: 50%"></div> <p>

Example:

6. Circle

Code: </p> <div style="height: 50px;width: 50px;background-color: #555;border-radius: 50%"></div> <p>
Example:

1. Down arrow

Code:

Example:

2. Up arrow

Code:

Example:

3. Left arrow

Code:

Example:

4. Right arrow

Code:

Example: