css - 流程 css 箭头

Question

我正在尝试让一些流程箭头 div 正常工作。这个想法是关于当前流程，您可以从当前流程内的下拉列表中选择某人将其分配给该人，然后单击一个按钮来告诉该人。那个人会进来，在那个过程中，他们会看到接受或拒绝按钮，然后我将打开下一个过程，并在下拉菜单中再次分配给谁。

我无法获得适合进程 div 的内容。事情变得很古怪。理想情况下，因为它们有“箭头”，每个进程 div 将是我设置的特定高度，因此它可以处理内部最大的高度要求（当按钮或下拉菜单位于内部时）。

我也不是必须为每个 div 箭头元素将左值增加 30 像素的超级粉丝。有什么方法可以在不必这样做的情况下获得相同的外观和感觉？

.arrow-container > div {
    float: left;
}

.arrow-left-done {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #d8ffcc;
    border-bottom: 40px solid #d8ffcc;
    border-left: 40px solid transparent;
}

.arrow-ctr-done {
    display: inline-block;
    width: 150px;
    background: #d8ffcc;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right-done {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #d8ffcc;
    position: relative;
}

.arrow-left-current {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #99afff;
    border-bottom: 40px solid #99afff;
    border-left: 40px solid transparent;
}

.arrow-ctr-current {
    display: inline-block;
    width: 150px;
    background: #99afff;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right-current {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #99afff;
    position: relative;
}

.arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 40px solid #EBEBEB;
    border-bottom: 40px solid #EBEBEB;
    border-left: 40px solid transparent;
}

.arrow-ctr {
    display: inline-block;
    width: 150px;
    background: #EBEBEB;
    min-height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
}

.arrow-right {
    display: inline-block;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #EBEBEB;
    position: relative;
}

<div style="display:inline-block;" class="arrow-container">
    <div id="zz" class="arrow-ctr-done">
        Changed/Tested
        Batman
    </div>
    <div id="zz" class="arrow-right-done"></div>
</div>

<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
    <div id="zz" class="arrow-left-current"></div>
    <div id="zz" class="arrow-ctr-current">
        Coding Standards
        <select>
            <option>John Smith</option>
            <option>Jane Doe</option>
            <option>Howdy Doody</option>
            <option>Batman</option>
        </select>
        <button>Assign</button>
    </div>
    <div id="zz" class="arrow-right-current"></div>
</div>

<div style="display:inline-block;position:relative;left:-60px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Manager Approval
    </div>
    <div id="zz" class="arrow-right"></div>
</div>

<div style="display:inline-block;position:relative;left:-90px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Implementor
    </div>
    <div id="zz" class="arrow-right"></div>
</div>

<div style="display:inline-block;position:relative;left:-120px" class="arrow-container">
    <div id="zz" class="arrow-left"></div>
    <div id="zz" class="arrow-ctr">
        Validator
    </div>
    <div id="zz" class="arrow-right"></div>
</div>

标签： css