You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用HTML/CSS实现鱼骨图的45°斜向边框与层级缩进列表？

avatar
云上老周
2026-8-20

解决方案

1. 替换90°边框为45°斜向边框

移除原border-image相关样式，改用线性渐变背景实现精准45°斜向分隔边框，保留原边框厚度（8px）：

.m-top-half-border {
    position: relative;
    padding-top: 1rem;
    background: linear-gradient(135deg, 
        transparent calc(100% - 8px), 
        #23468c calc(100% - 8px), 
        #23468c 100%, 
        transparent 100%) top right/100% 100% no-repeat;
}

.m-bottom-half-border {
    position: relative;
    padding-bottom: 1rem;
    background: linear-gradient(-135deg, 
        transparent calc(100% - 8px), 
        #23468c calc(100% - 8px), 
        #23468c 100%, 
        transparent 100%) bottom right/100% 100% no-repeat;
}

原理：通过渐变角度和颜色节点控制，绘制出从右上到左下（上半部分）、右下到左上（下半部分）的斜向线条，替代原直角边框。

2. 实现缩进且避免div缩小

原问题中margin-right导致div缩小，是因为块级元素默认宽度为父容器100%，margin-right会挤压自身宽度。解决方法是给灰色项套一层容器，容器负责缩进，灰色div占满容器宽度：

步骤1：添加容器样式

.item-container {
    margin-right: 0;
}
.bg-secondary {
    width: 100%;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
    padding: 0.5rem; /* 可选：提升视觉体验 */
}

步骤2：修改HTML结构

将每个<div class="bg-secondary">包裹在<div class="item-container">中，示例：

<p>
    <div class="item-container" style="margin-right: 70px;">
        <div class="bg-secondary">
            <div contenteditable="true" class="btn-lg"></div>
        </div>
    </div>
</p>

这样容器的margin-right仅控制缩进，内部灰色div保持100%宽度，不会被挤压缩小。

完整修改后的代码 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <style>
            .arrow {
                width:100%;
            }
            .line {
                margin-top:14px;
                width:97%;
                background:#23468c;
                height:10px;
                float:left;
            }
            .point {    
                width: 3%;
                height: 0; 
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 30px solid #23468c;
                float:right;
            }

            /* 修改后的45°斜向边框 */
            .m-top-half-border {
                position: relative;
                padding-top: 1rem;
                background: linear-gradient(135deg, 
                    transparent calc(100% - 8px), 
                    #23468c calc(100% - 8px), 
                    #23468c 100%, 
                    transparent 100%) top right/100% 100% no-repeat;
            }

            .m-bottom-half-border {
                position: relative;
                padding-bottom: 1rem;
                background: linear-gradient(-135deg, 
                    transparent calc(100% - 8px), 
                    #23468c calc(100% - 8px), 
                    #23468c 100%, 
                    transparent 100%) bottom right/100% 100% no-repeat;
            }

            /* 缩进容器样式 */
            .item-container {
                margin-right: 0;
            }
            .bg-secondary {
                width: 100%;
                box-sizing: border-box;
                padding: 0.5rem;
            }
        </style>
    </head>
    <body>
        <br>
        <div class="row">
            <div class="col-md-11"> 
                <div class="row">
                    <div class="col-md-12"> 
                        <div class="row">
                            <div class="col-lg-4 m-top-half-border" >
                                <h4 class="text-center">Materials</h4>
                                <p>
                                    <div class="item-container" style="margin-right: 140px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 70px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                            </div>

                            <div class="col-lg-4 m-top-half-border" >
                                <h4 class="text-center">Method</h4>
                                <p>
                                    <div class="item-container" style="margin-right: 280px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 210px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 140px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 70px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                            </div>

                            <div class="col-lg-4 m-top-half-border" >
                                <h4 class="text-center">Man Power</h4>
                                <p>
                                    <div class="item-container" style="margin-right: 210px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 140px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 70px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- ./col-md-11 -->
        </div><!-- ./row -->

        <div class="row">
            <div class="col-md-12" style="white-space: nowrap;">    
                <div class="arrow">
                    <div class="line"></div>
                    <div class="point"></div>
                </div><!-- ./arrow -->
            </div><!-- ./col-md-12 -->
        </div><!-- ./row -->


        <div class="row">
            <div class="col-md-11"> 
                <div class="row">
                    <div class="col-md-12"> 
                        <div class="row">
                            <div class="col-lg-4 m-bottom-half-border" >
                                <h4 class="text-center">Machine</h4>
                                <p>
                                    <div class="item-container" style="margin-right: 70px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 140px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 210px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 280px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 350px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                                <p>
                                    <div class="item-container" style="margin-right: 420px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                            </div>

                            <div class="col-lg-4 m-bottom-half-border" >
                                <h4 class="text-center">Mother Nature</h4>
                            </div>

                            <div class="col-lg-4 m-bottom-half-border" >
                                <h4 class="text-center">Measurement</h4>
                                <p>
                                    <div class="item-container" style="margin-right: 70px;">
                                        <div class="bg-secondary">
                                            <div contenteditable="true" class="btn-lg"></div>
                                        </div>
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- ./col-md-11 -->
        </div><!-- ./row -->

    </body>
</html>

额外优化建议

  • 动态添加项时，可通过JS给新容器设置递增的margin-right值（如每次增加70px）。
  • 将缩进步长定义为CSS变量--indent-step:70px;，后续用calc(var(--indent-step) * n)统一控制缩进量。

内容的提问来源于stack exchange，提问作者Murilo lima alves

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.20 09:45:41