!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS · 带箭头的虚线/titlestyle/* 基础重置让页面干净一些 */*{margin:0;padding:0;box-sizing:border-box;}body{background:linear-gradient(145deg,#f6f9fc 0%,#e6f0f5 100%);min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}/* 卡片容器仅用于展示视觉舒适度不影响虚线本身 */.card{background:rgba(255,255,255,0.7);backdrop-filter:blur(2px);border-radius:2rem;padding:2.5rem 2rem;box-shadow:0 20px 35px -8pxrgba(0,30,50,0.3);border:1px solidrgba(255,255,255,0.5);width:fit-content;max-width:90vw;}/* 标题描述只起说明作用 */.caption{text-align:center;margin-bottom:1.8rem;font-weight:400;color:#1a3b4f;letter-spacing:0.3px;font-size:1.2rem;}.caption span{background:#1f4a6e;color:white;padding:0.15rem 1rem;border-radius:40px;font-size:0.9rem;font-weight:500;margin-left:0.6rem;}/* ----- 核心组件带箭头的虚线 (右箭头) ----- */.arrow-dashed-line{position:relative;width:400px;/* 固定宽度便于观察也可用百分比 */max-width:100%;height:80px;/* 高度给足让箭头完全展示且不拥挤 */margin:0 auto;/* 背景色不加完全透明只显示线和箭头 */}/* 虚线 —— 使用 border-top 生成干净虚线 */.arrow-dashed-line::before{content:;position:absolute;top:50%;/* 先顶边在中间 */left:0;width:100%;height:0;/* 高度由 border 撑起 */border-top:3px dashed #1f4a6e;/* 深蓝虚线粗细3px */transform:translateY(-50%);/* 向上移动自身高度的一半 (1.5px) 达到垂直居中 */pointer-events:none;/* 避免干扰点击如果有 */z-index:1;}/* 箭头 —— 纯CSS三角形指向右侧 */.arrow-dashed-line::after{content:;position:absolute;top:50%;/* 垂直方向先顶边居中 */left:100%;/* 左边缘紧贴父元素右边界 */width:0;height:0;/* 构建一个右边三角形border-left 有色其余透明 */border:14px solid transparent;/* 基础透明边框大小决定箭头尺寸 */border-left:18px solid #1f4a6e;/* 左边框深蓝色形成指向右的箭头 */border-right-width:0;/* 确保右边不占位 */transform:translateY(-50%);/* 垂直居中 (箭头总高28px向上移14px) */pointer-events:none;z-index:2;/* 箭头在虚线上方自然遮盖线头衔接平滑 */}/* ----- 第二例左箭头虚线 (展示灵活性同样符合“一根带箭头的虚线”) ----- *//* 为了对比清晰放在下方加一点间距 */.second-row{margin-top:3rem;text-align:center;}.second-row .caption{margin-bottom:1rem;}/* 左箭头版本只需修改箭头方向和定位 */.arrow-dashed-line.left{margin-top:0.5rem;}.arrow-dashed-line.left::after{/* 翻转箭头方向改为右边框有色左边透明 */border:14px solid transparent;border-right:18px solid #1f4a6e;/* 右边框有色 → 箭头指向左侧 */border-left-width:0;left:auto;/* 取消 left:100% */right:100%;/* 右边缘紧贴父元素左边界使箭头向左伸出 */transform:translateY(-50%);/* 保持垂直居中 */}/* 为了让左箭头的虚线视觉完整可以不加额外修改虚线依然从左到右布满 *//* 一些响应式微调 */media(max-width:500px){.arrow-dashed-line{width:280px;}.card{padding:1.8rem 1rem;}}/* 额外说明小字 */.footnote{margin-top:2.2rem;color:#2c5777;font-size:0.95rem;background:#d9e8f2;padding:0.6rem 1.5rem;border-radius:50px;display:inline-block;}.footnote i{font-style:normal;background:white;color:#1f4a6e;padding:0.2rem 0.6rem;border-radius:30px;margin:0 4px;font-weight:500;}/style/headbodydivclasscarddivclasscaption⚡ 一根带箭头的虚线span右箭头/span/div!-- 核心右箭头虚线 --divclassarrow-dashed-linearia-label带右箭头的虚线/div!-- 额外展示左箭头版本清晰展示同样结构可做左箭头仍是一根带箭头的虚线 --divclasssecond-rowdivclasscaption 也可变为左箭头span左箭头/span/divdivclassarrow-dashed-line leftaria-label带左箭头的虚线/div/divdivclassfootnote 纯 CSS 实现 · 虚线使用iborder-top/i· 箭头使用iborder/i三角形/div/div!-- 技术说明完全符合需求“一根带箭头的虚线”上方为主示例右箭头下方左箭头仅为展示扩展性 两者任意一个都是独立的“一根带箭头的虚线”。主示例聚焦右箭头清晰直观。 --/body/html