HTML/CSS 漏斗堆栈的背景颜色

Question

我已根据本文中提供的代码为我的仪表板创建了一个转化漏斗：Styling a funnel stack layout using native CSS and HTML

更具体地说，使用此 fiddle 中的代码： http://jsfiddle.net/97Yr6/

结果如下：

我想要做的是像左边的那个一样设置漏斗小部件的样式（白色背景和边框）。问题是，当我将整个 "ul" 对象放在具有白色背景的 div 中时，它失去了漏斗外观。

在我看来，由于 z-index，.funnel > ul:before 中为边框定义的颜色不可见，但我真的不知道如何解决它。

这是我的代码（它与 fiddle 中的代码几乎相同）：

HTML

.funnel > ul {
      position: relative;
      overflow: hidden;
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }
    .funnel > ul:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 50%;
      margin-left: -220px;
      width: 0;
      border-top: 1200px solid #FFFFFF;
      border-left: 220px solid #F8F8F8;
      border-right: 220px solid #F8F8F8;
    }
    .funnel > ul > li:after,
    .funnel > ul > li:before {
      content: "";
      display: block;
      height: 2em;
      /*background: #fff;*/
      width: 100%;
    }
    .funnel > ul > li:before {
      border-top: 1px dotted #ccc
    }
    .funnel > ul > li:first-child:before {
      border: 0;
    }
    .funnel > ul > li > .conversion {
      position: absolute;
      left: 60%;
      white-space: nowrap;
      margin-left: 100px;
    }
    .funnel > ul > li:nth-child(1) span {
     left: 68%;
    }
    .funnel > ul > li:nth-child(2) span {
      left: 64%;
    }
    .funnel > ul > li:nth-child(3) span {
      left: 61%
    }
    .funnel > ul > li:nth-child(4) span {
      left: 57%
    }

<div class="widget-body funnel">

  <ul>
    <li>
      <span class="single-number-lg">4,700</span>
      <br />
      <small>visitors</small>
      <span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%&#x25B2;</span>
      <span class="conversion">
                  <span class="single-number-xs" style="line-height:20px;">5%</span>
      <small>conversion</small> 
      </span>
    </li>
    <li>
      <span class="single-number-lg">482</span>
      <br />
      <small>leads</small>
      <span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%&#x25B2;</span>
      <span class="conversion">
                  <span class="single-number-xs" style="line-height:20px;">17%</span>
      <small>conversion</small> 
      </span>
    </li>
    <li>
      <span class="single-number-lg">235</span>
      <br />
      <small>trials</small>
      <span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">6%&#x25B2;</span>
      <span class="conversion">
                  <span class="single-number-xs" style="line-height:20px;">9%</span>
      <small>conversion</small> 
      </span>
    </li>
    <li>
      <span class="single-number-lg">56</span>
      <br />
      <small>customers</small>
      <span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%&#x25B2;</span>
      <span class="conversion">
                  <span class="single-number-xs" style="line-height:20px;">4%</span>
      <small>conversion</small> 
      </span>
    </li>
  </ul>

</div>
<!--/funnel-->

谢谢！

Answer 1

我（到目前为止）已经做到了这一点，以便在不使用 z-index 等的情况下更改 html：

#container {
  width: 90%;
  height: 500px;
  background-color: gray;
  text-align: center;
  position: absolute;
  overflow: hidden;
}
#funnel {
  height: 0px;
  margin: 0 auto;
  width: 50%;
  border-left: 50px solid gray;
  border-right: 50px solid gray;
  border-top: 500px solid white;
}
.value {
  position: absolute;
  height: 50px;
  width: 100%;
  color: black;
  left: 0;
  margin-top: -500px;
  font-size: 24px;
  height: 100%;
}
.val {
  margin: 0 auto;
  margin-top: 5%;
  border-bottom: 1px dashed black;
  width: 100%;
  
  
  height:15%; /*change this depending on number of values, could be done in js*/
}
.side {
  float: right;
}
.val:last-child {
  border-bottom: none;
}

<div id="container">
  <div id="funnel">
    <div class="value">
      <div class="val">
        123
        <div class="side">hi</div>
      </div>
      <div class="val">
        1234
        <div class="side">hi</div>
      </div>
      <div class="val">
        12345
        <div class="side">hi</div>
      </div>
      <div class="val">
        123456
        <div class="side">hi</div>
      </div>
      <div class="val">
        12345678
        <div class="side">hi</div>
      </div>
    </div>
  </div>
</div>

HTML/CSS 漏斗堆栈的背景颜色

Background color on HTML/CSS funnel stack

html

css

z-index