如何从线性渐变构建所需大小的三角形？

Question

我设法使用 webkit-appearance 删除了 select 元素的默认箭头图像，因为我运行在 chrome.

我是 css 的新手，我从这个 codepen 得到了构建三角形的想法，我想构建所需大小的三角形，正如您从代码片段中看到的那样，三角形的形状并不整齐。

我对此有一些疑问，

背景位置100%指的是select元素宽度。是这个正确吗？
这些计算 calc(100% - 2.5em) 0.5em 对背景位置意味着什么？
对于背景大小 20px 10px 表示水平方向 20px 和顶部 10px，我说得对吗？
如果是，将 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

您将在这里找到所有问题的答案：Using percentage values with background-position on a linear gradient

另一方面，您可以像下面这样优化代码以更好地控制三角形：

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>

还相关：

如何从线性渐变构建所需大小的三角形？

How to construct a triangle of required size from linear gradient?

html

css

css-shapes

linear-gradients