文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用HTML、CSS和/或Javascript的鱼骨列表的对角线级联元素和90边框(因果图)

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

Stack Overflow用户
提问于 2022-09-03 05:12:54
回答 2查看 100关注 0票数 2

我组织了一些div和段落来创建六个不同的列表，它们都连接到一个箭头上。我已经能够创建类似鱼骨图的东西了，在下面的示例中可以看到：

​

​

动态添加灰色(bg-secondary类)div。6个div在col内有两个蓝色边框(以模拟它们之间的90°分隔符)

我现在真正想要实现的是这样的对角线边界和级联列表：

​

第二张图像在油漆内部编辑得很差，但区别是:我有一个对角线边框，而不是90边框，模拟一个45°分隔符。除此之外，我还缩进了列表(根据项目的数量，保证金增加了)。

我不知道怎样才能达到45度的边界。事实上，我添加了这些边距-右样式，也使div更小。你们有什么建议？

代码语言：javascript
复制
<!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>
javascript
html
css
twitter-bootstrap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-20 17:06:37

您可以通过添加：：在放置对角线之前和：：后置对角线来隐藏特定部分来实现它。

如果将其添加到CSS中：

代码语言：javascript
复制
.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);
}

​

​

票数 2
EN

Stack Overflow用户

发布于 2022-09-15 23:28:27

你能知道怎么做吗？

我认为给出一个完整的解决方案有点工作，但如果这有帮助的话，我使用您提供的代码来创建一个起点，让您继续编写代码。

代码语言：javascript
复制
.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;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73589802

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档