Bootstrap 使用HTML、CSS和/或Javascript的鱼骨列表的对角线级联元素和90º边框(类似因果图)

koaltpgm  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(269)

我组织了一些div和段落，创建了六个不同的列表，所有列表都连接到一个箭头上。我已经能够创建一个看起来像鱼骨图的东西，正如你们在下面的例子中所看到的：

灰色（bg-secondary类）div是动态添加的。六个div在col内有两个蓝色边框（以模拟它们之间的90º分隔符）
我现在真正努力实现的是对角线边框和级联列表，看起来像这样：

第二个图像在Paint中编辑得很差，但不同之处在于：我用对角线代替90度的边框，模拟45度的分隔符。除此之外，我还使列表缩进（边距根据项目的数量增加）。
我不知道如何才能达到45度的边界。事实上，我添加了那些右边距的风格也使divs变小了。你们有什么建议吗？

<!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;
            }

            .m-top-half-border {
                border-top: 8px solid;
                border-right: 8px solid;
                border-image: linear-gradient(to left, #23468c 70%, transparent 30%) 30% 1;
            }

            .m-bottom-half-border {
                border-bottom: 8px solid;
                border-right: 8px solid;
                border-image: linear-gradient(to left, #23468c 70%, transparent 30%) 30% 1;
            }
        </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 style="margin-right: 140px;" class="bg-secondary">
                                        <div contenteditable="true" class="btn-lg"></div>
                                    </div>
                                </p>
                                <p>
                                    <div style="margin-right: 70px;" class="bg-secondary">
                                        <div contenteditable="true" class="btn-lg"></div>
                                    </div>
                                </p>
                            </div>

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

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

    </body>
</html>
twitter-bootstrap

2条答案

按热度按时间
u7up0aaq

u7up0aaq1#

您可以通过在前面添加：：来放置一条对角线，在后面添加：：来隐藏对角线上的特定部分。
如果您将以下内容添加到CSS：

.m-top-half-border {
  position: relative;
  overflow: hidden;
}

.m-top-half-border::before {
  content: "";
  position: absolute;
  border: 4px solid #23468c;
  height: 100%;
  right: 77px;
  top: 0;
  background: white;
  z-index: 2;
  transform: skew(25deg, 0deg);
}
.m-top-half-border::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 191px;
  right: -97px;
  top: 0;
  background: white;
  transform: skew(25deg, 0deg);
}

.m-bottom-half-border {
  position: relative;
  overflow: hidden;
}

.m-bottom-half-border::before {
  content: "";
  position: absolute;
  border: 4px solid #23468c;
  height: 100%;
  right: 104px;
  top: 0;
  background: white;
  z-index: 2;
  transform: skew(-25deg, 0deg);
}
.m-bottom-half-border::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 198px;
  right: -76px;
  top: 0;
  background: white;
  transform: skew(-25deg, 0deg);
}

赞(0）分享  回复(0）举报  2022-12-07
vuktfyat

vuktfyat2#

你能知道怎么做吗？
我认为给出一个完整的解决方案是一项工作，但如果这有帮助的话，我使用了您提供的代码来创建一个起点，以便您继续编码。

.m-bottom-half-border {
  position: relative; /* Makes the content relative to use the ::after */
}

/* Use ::after to avoid create new HTML elements */
.m-bottom-half-border::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0; /* Right and top to keep your line to the right */
    height: 150%;
    transform: rotate(45deg) translateX(150%); /* Here you create the rotation of 45 degrees and move to the right to avoid this crashes the content */
    transform-origin: top; /* This is to keep it centered while rotating */
    border: 4px solid red;
    background: red;
    border-bottom: 8px solid;
    border-right: 8px solid;
}
赞(0）分享  回复(0）举报  2022-12-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com