html - 面包屑不显示过度倾斜

Question

我做了一个倾斜的div

这是它的CSS

.bread_active{font-family: 'Source Sans Pro', sans-serif;font-size: 14px;font-weight: 600;color: #3d4b2c;}
.bread_lst{font-family: 'Source Sans Pro', sans-serif;font-size: 14px;font-weight: 400;color: #e0eed0;}
.breadcrumb{/*background-color: #85ba42 !important;*/padding-top: 15px !important;padding-bottom: 15px !important;margin: 0px !important;}
.breadcrumb>li+li:before {color: #e0eed0 !important;}
.filter_area{background: #edeff1;}
.bread_crmb{height: 100%;
    padding: 5px 0 17px;
    position: relative;
}
.filter_area .bread_crmb::before {
    background: #85ba42;
    content: "dfds";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    width: 2000px;
    z-index: 100;
}

这是html

<!--BREADCRUMB-->
    <div class="filter_area">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-lg-5">
                    <div class="bread_crmb">
                        <ol class="breadcrumb">
                            <li><a href="#" class="bread_lst">You are here: Home</a></li>
                            <li><a href="#" class="bread_lst">Services</a></li>
                            <li class="active bread_active">Honda Accord - Diesel</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--BREADCRUMB ENDS-->

问题是面包屑列表没有显示我也尝试过操纵 z-index 但它不起作用有人可以帮忙吗

Answer 1

删除过滤器 .filter_area{background: #edeff1;}

并将 z-index:-1 添加到.filter_area .bread_crmb::before {

看看这个 fiddle https://jsfiddle.net/xj9p1d0f/2/