Как построить треугольник необходимого размера из линейного градиента?

Question

Мне удалось удалить изображение стрелки по умолчанию для элемента select, используя webkit-внешний вид, поскольку я запускаю это в chrome.

Я новичок в css, у меня появилась идея построить треугольник из это кодовое поле , я хочу построить треугольник необходимого размера, как вы видите из фрагмента треугольника не аккуратной формы.

У меня есть вопрос по этому вопросу,

1. В background-position 100% относится к ширине элемента select. Это правильно?
2. Что означают эти вычисления cal c (100% - 2.5em) 0.5em для background-position?
3. Для фонового размера 20px 10px означает горизонтально от 20px и из первых 10 пикселей, я прав?
4. Если да, если 0px 0px заставит все это изображение исчезнуть с экрана, 0 px берет ссылку откуда-то на экране?

select {
     width:150px;
     height:50px;
      -webkit-appearance: none; 
       background-image: 
           linear-gradient(45deg,transparent 50% , black 50% ),
           linear-gradient(135deg, black 50%, transparent 50%);

       background-position:
          calc(100% - 20px) calc(100% - 20px),
          calc(100% - 15px) calc(100% - 20px),
          calc(100% - 2.5em) 0.5em;
      background-size:
          20px 10px,
          10px 10px,
          5px 1px;
      background-repeat: no-repeat;
    }

<select class="version">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4"> 4</option>
        <option value="5">5</option>
    </select>

Answer 1

Вы найдете ответы на все ваши вопросы здесь: Использование процентных значений с background-position на линейном градиенте

С другой стороны, вы можете оптимизировать код, как показано ниже, чтобы лучше контролировать треугольник:

select {
     width:150px;
     height:50px;
      -webkit-appearance: none; 
       background-image: 
           linear-gradient(to top left ,transparent 50%, black 0),
           linear-gradient(to top right,transparent 50%, black 0);
       background-position:
       /* The same top value for both 
          The right of the second one is the first + the width*/
          top 15px right 5px,
          top 15px right 15px;
      background-size:
        /*width height. both will have the same so the final result will be 2*Width Height*/
          10px    10px; 
      background-repeat: no-repeat;
    }

<select class="version">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4"> 4</option>
        <option value="5">5</option>
    </select>

С помощью CSS переменных вы можете упростить задачу:

select {
     --t:15px;  /* offset from top */
     --r:5px;   /* offset from right*/
     --w:20px; /* Overal width*/
     --h:10px; /* Overal height*/
  
     width:150px;
     height:50px;
      -webkit-appearance: none; 
       background-image: 
           linear-gradient(to top left ,transparent 50%, black 0),
           linear-gradient(to top right,transparent 50%, black 0);
       background-position:
       /* The same top value for both 
          The right of the second one is the first + the width*/
          top var(--t) right var(--r),
          top var(--t) right calc(var(--r) + var(--w)/2);
      background-size:
        /*width height. both will have the same so the final result will be 2*Width Height*/
          calc(var(--w)/2) var(--h); 
      background-repeat: no-repeat;
    }

<select class="version">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4"> 4</option>
        <option value="5">5</option>
    </select>
    
    <select class="version" style="--w:10px;--r:10px;--t:10px">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4"> 4</option>
        <option value="5">5</option>
    </select>
    
       <select class="version" style="--w:30px;--h:20px;--t:10px">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4"> 4</option>
        <option value="5">5</option>
    </select>

также относятся: { ссылка }