如何从线性渐变构建所需大小的三角形?
How to construct a triangle of required size from linear gradient?
我设法使用 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>
您将在这里找到所有问题的答案: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>
还相关:
我设法使用 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>
您将在这里找到所有问题的答案: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>
还相关: