边框左上切

Question

我需要帮助才能知道如何在左侧切割边框的顶部，如下面的链接所示。我是否必须列出一个列表，或者我可以使用div来这样做吗？

http://codepen.io/FilipDanic/pen/dPNRQm

    <ul>
        <li class="active"><i class="fa fa-home fa-lg"></i> Home</li>
        <li><i class="fa fa-envelope fa-lg"></i> Inbox <span class="unread">2</span></li>
        <li><i class="fa fa-user fa-lg"></i> Profile</li>
        <li><i class="fa fa-cogs fa-lg"></i> Settings</li>
        <li><i class="fa fa-power-off fa-lg"></i> Log-out</li>
    </ul>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
  background: url('https://unsplash.imgix.net/44/9s1lvXLlSbCX5l3ZaYWP_hdr-1.jpg?q=75&fm=jpg&s=fd39ab9358b1aec7746ee67168ccf268') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

ul{
  margin: 2em auto;
  width: 400px;
  background: #34495e;
  list-style: none;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

ul>li{
  color: #fff;
  background: #34495e;
  padding: 1em;
  border-bottom: 0.5em solid #2c3e50;
  margin-top: 0.25em;
  border-left: 0.5em groove #e74c3c;
  cursor: pointer;
  transition: 0.4s all;
}

i{
  padding-right: 0.5em;
}

.active{
  border-left: 0.5em groove #1abc9c;
}

...

Answer 1

在border-top: 0.5em groove #2c3e50;样式定义中添加ul > li。

http://codepen.io/anon/pen/NPpVpd

Answer 2

这只是添加不同颜色的border-left和border-bottom。这可以对div：

之类的任何元素进行

div{
    width: 400px;
    height: 200px;
    background: red;
    border-left: 10px solid blue;
    border-bottom: 10px solid purple;    
}

EXAMPLE 1

诀窍是堆叠它们，而border-bottom颜色是background-color的阴影，而border-left是其他颜色：

div{
    width: 400px;
    height: 200px;
    background: red;
    border-left: 10px solid purple;
    border-bottom: 10px solid #c20c08;    
}

EXAMPLE 2