如何使用html和css在两个div之间放置箭头

Question

我必须在两个之间放箭头div.下面是一个示例图像,以便您可以得到正确的想法:

这就是我目前所拥有的:

<style>
        .link{
            font-size: 14px;
            margin-bottom: 10px;
        }
        .link a{
            border: 1px solid #d8d8d8;
            border-radius: 1px;
            color: #222222;
            padding: 0.4rem;
            display: block;
            text-align: center;
            height: 55px;
            line-height: 20px;
        }
        .custom_padding{
            padding-top: 15px !important;
        }
        .panel_custom{
            width: 100%;
            float: left;
            padding: 1rem;
        }
        .custom_a{
            padding: 0 !important;
            text-align: right;
            width: 100%;
            background: #EFEFEF !important;
        }
        .custom_a:hover, .custom_a:active{
            background: #EFEFEF !important;
        }
    </style>

  <div class="row">

        <div class="large-8 columns">
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Normal" class="custom_a">Normal Pay Cycle</a>
                    <div id="Normal" class="panel_custom content active">
                        <div class="large-3 columns link"><a href="/timeclock/rapid">TimeClock Rapid Entry</a></div>
                        <div class="large-3 columns link"><a href="/timeclock/all/hoursworked" style="padding: 5px 0 0 0;">Hours Worked<br>(Approve Hours)</a></div>
                        <div class="large-3 columns link"><a href="/employees?Actions=Pay_Employee" class="custom_padding">Pay Employee</a></div>
                        <div class="large-3 columns link"><a href="/processing/taxpayments">Pay Taxes Owed</a></div>
                    </div>
                </div>
            </div>
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Common" class="custom_a">Common Report</a>
                    <div id="Common" class="panel_custom content active">
                        <div class="large-4 columns link"><a href="/reports/employertotal" class="custom_padding">Employer's Tax Total</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked" class="custom_padding">Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/employees" class="custom_padding">Employee Report</a></div>

                        <div class="large-4 columns link"><a href="/timeclock/all/hoursworked">TimeClock Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked132" class="custom_padding">Hours Worked 132 Col</a></div>
                        <div class="large-4 columns link"><a href="/processing/schedulechecks">Schedule of Checks Printed</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-4 columns accordion" data-accordion>
            <div class="panel radius panel_custom accordion-navigation active">
                <a href="#Maintain" class="custom_a">Maintain Employees</a>
                <div id="Maintain" class="panel_custom content active">
                    <div class="large-6 columns link"><a href="/employees/newemployee">Add Employee</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Details" class="custom_padding">Details</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Payrate" class="custom_padding">Payrate</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Note" class="custom_padding">Note</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Taxes" class="custom_padding">Taxes</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Accrual" class="custom_padding">Accrual</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Deductions" class="custom_padding">Deductions</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Delete" class="custom_padding">Delete</a></div>
                </div>
            </div>
        </div>
    </div>

使用上面的HTML代码我想创建下面的视图.这应该清楚地说明我想要什么.

Answer 1

您可以为此使用伪元素,例如:after行和:before三角形.要定位,您可以使用箭头position: absolute与transform: translate()

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 10px 25px;
  border: 1px solid black;
  margin: 0 25px;
  position: relative;
}
li:not(:last-child):after {
  content: '';
  height: 1px;
  background: black;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 50%;
}
li:not(:last-child):before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  right: -50px;
  transform: translateY(-50%);
}

<ul>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
</ul>