إنشاء أسهم تقييم الإجابة - CSS

ماذا تقصد؟

إذا كنت تقصد عمل ذلك من خلال css أو التصميم فقط فيمكنك تنفيذ ذلك

من خلال ال border يمكنك تصميم الأسهم كالتالي

<div id="triangle-up"></div>

ثم إضافة التنسيقات

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

والكود السابق يجعل السهم لأعلى ولعمل السهم لأسفل يمكنك استخدام 

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red; /* bottom بدلاً من  top لاحظ  */
}

وبالنسبة للعداد أو الرقم الوجود بين الأسهم فيمكنك استخدام الجافاسكربت لتنفيذ ذلك كالتالي

<h1 class="counter-display">(..)</h1>
<button class="counter-minus">-</button>
<button class="counter-plus">+</button>
<script>
let counterDisplayElem = document.querySelector('.counter-display');
let counterMinusElem = document.querySelector('.counter-minus');
let counterPlusElem = document.querySelector('.counter-plus');

let count = 0;

updateDisplay();

counterPlusElem.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

counterMinusElem.addEventListener("click",()=>{
    count--;
    updateDisplay();
});

function updateDisplay(){
    counterDisplayElem.innerHTML = count;
};
</script>

شكرا جدا، ألا يوجد class جاهز لعمله باستخدام ال bootstrap ؟

- جربتها وزبطت، كيف أجيبهم بالنص ؟

بتاريخ 3 دقائق مضت قال Mohammed Abu Yousef:

شكرا جدا، ألا يوجد class جاهز لعمله باستخدام ال bootstrap ؟

- جربتها وزبطت، كيف أجيبهم بالنص ؟

لا أعتقد انه يوجد كلاس جاهز لذلك 

يمكنك توسيط العنصر بالعديد من الطرق وتختلف حسب الكود الذي تستخدمه حيث يمكنك استخدام ال flexbox 

.flex-container {   
    display: flex;
    align-items: center;
    justify-content: center;
  	flex-direction: column;
}