كيفية رسم مثلث بـ CSS

كيفية رسم مثلث بـ CSS
​

 

شكرا على هذه المبادرة الطيبة.
هذا مثال آخر يبين كيفية تصميم إتجاه المثلث:

كود الـ "HTML"​

كود HTML:

<div>
                    <p class="arrow-up"></p>
                    <p class="arrow-down"></p>
                    <p class="arrow-left"></p>
                    <p class="arrow-right"></p>
                </div>

كود التنسيق أو الـ "CSS"​

كود HTML:

.arrow-up {
              width: 0;
              height: 0;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              
              border-bottom: 5px solid black;
            }

            .arrow-down {
              width: 0;
              height: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              
              border-top: 10px solid #f00;
            }

            .arrow-right {
              width: 0;
              height: 0;
              border-top: 20px solid transparent;
              border-bottom: 20px solid transparent;
              
              border-left: 20px solid green;
            }

            .arrow-left {
              width: 0;
              height: 0;
              border-top: 30px solid transparent;
              border-bottom: 30px solid transparent;
              
              border-right:30px solid blue;
            }

النتيجة:

​