标签：

要实现背景为白色、边框线宽度为1px的空心三角箭头，可以在前面的样式基础上进行一些调整。下面是调整后的CSS样式代码：

.arrow {
    position: relative;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000;   /* 修改箭头颜色为黑色 */
    background-color: #fff;   /* 设置背景为白色 */
    border-width: 1px;   /* 设置边框线宽度为1px */
}

.arrow::before {
    content: '';
    position: absolute;
    top: -11px;
    left: -11px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-top: 11px solid #000;   /* 修改箭头颜色为黑色 */
    background-color: #fff;   /* 设置背景为白色 */
    border-width: 1px;   /* 设置边框线宽度为1px */
}

上述代码中，通过设置background-color属性为白色，可以将箭头的背景设置为白色。通过设置border-width属性为1px，可以将边框线宽度设置为1px。

为了使边框线正确显示，需要对伪元素的位置、边框宽度进行调整。在示例中，我将伪元素的top和left分别减去1px，并将border-width增加1px来补偿箭头的大小。

同样地，要在HTML中使用这个样式，可以添加一个元素并为其添加arrow类名：

<div class="arrow"></div>

这样，你就可以看到一个背景为白色、边框线宽度为1px的空心三角箭头。你可以根据需要自行调整箭头的大小、颜色和位置。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。