在css中创建对角线

Question

我尝试使用ul li和css3，

进行此操作

但相反，我得到了这个：

这是我的代码：

html

<div class="row mb-20 text-center">
    <h3>{{ __('Visions & Missions') }}</h3>
    <div class="bg_infostep">
        <ul class="list-inline">
        @foreach($visions as $vision)
            <li>{!!$vision->icon!!}<span>{{$vision->title}} <br> {{$vision->description}}</span></li>
        @endforeach
        </ul>
    </div>
</div>

css

.bg_infostep { overflow: hidden; margin: 0 auto; }

.bg_infostep li {
    float: left;
    background: #cdcdcd;
    padding: 10px 5% 10px 5%;
    position: relative;
    min-height: 30px;
}

.bg_infostep li:last-child, .bg_infostep li:first-child {
    padding-left: 6%;
    padding-right: 4%;
}

我的错误在哪里？

Answer 1

解决

我需要在我的css代码中添加:before，这里是需要帮助的人的完整css代码。

.bg_infostep { overflow: hidden; margin: 0 auto; }

.bg_infostep li {
    float: left;
    background: #cdcdcd;
    padding: 10px 5% 10px 5%;
    position: relative;
    min-height: 30px;
}

.bg_infostep li:last-child, .bg_infostep li:first-child {
    padding-left: 6%;
    padding-right: 4%;
}

.bg_infostep li:before{
  position:absolute;
  top:-20px;
  width:5px;
  height:200px;
  left:0;
  background:#f9f9f9;
  display:block;
  content:"";
  transform:rotate(-20deg);
  -ms-transform:rotate(-20deg);
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  -o-transform:rotate(-20deg)
}
.bg_infostep li:first-child:before{background:none}

.bg_infostep li i{font-size:30px;color:#343434;position:absolute;top:10px;left:20px}
.bg_infostep li span{color:#333;font-weight:600;display:block;line-height:15px;height:30px;overflow:hidden}

  PS：为什么要投票？如果你有一些知识share，如果你没有   leave但为什么要投票？是为了获得新的徽章   现场？或者你只是某种仇敌？