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

[x32x01]

كيفية رسم مثلث بـ CSS: يمكنك رسم مثلث باستخدام خاصية border في CSS. بتعيين border-left و border-right كـ "transparent" و border-bottom بلون معين، يتم رسم مثلث بسهولة

 

[x32x01]

مثال آخر يبين كيفية تصميم إتجاه المثلث

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

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

:: النتيجة ::