创建对角线边框半径

经过一段时间的寻找解决方案后，我没有找到任何解决方案。我想做的是在第一个上创建一个对角边框li元素的top left角落..我尝试使用一个涉及的解决方案background财产，但它并没有给我我想要的东西。而且它不允许对稍后需要的颜色进行任何操作。

浅蓝色应该是被剪切的边框（而不是被剪切的背景），深灰色应该是被剪切的背景li.

我怎样才能通过 CSS 实现这一点？ JS/Jquery 解决方案也可以。

EDIT:在看到我的问题的很多被误解的答案后，我会澄清一下：

左图是我现在的样子，右图应该是结果。

.cal-scheme {
    width: 100%;

    li {
        width: calc(100% / 6);
        height: 150px;
        margin: 0;
        padding: 0;
        border: $thin-blue;
        box-sizing: border-box;
        float: left;

        &:first-child {
            background: linear-gradient(135deg, transparent 20px, $light-blue 0);
            border: 0;
        }
    }
}

如果我理解问题，你需要类似的东西this http://jsfiddle.net/q536p64b/

HTML:

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

CSS:

body {
    background: darkgrey;
}
li {
    display: block;
    list-style: none;
    width: 200px;
    height: 50px;
    background: lightblue;
    position: relative;
    border: 10px solid lightblue;
    margin-top: 5px;
}

li:first-child:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: darkgrey;
    position: absolute;
    top: -15px;
    left: -15px;
    transform: rotate(45deg);
}

UPDATE:

你无法通过边界半径来实现。只是使用 css 形状，或者像这样的 hack更新了小提琴 http://jsfiddle.net/q536p64b/2/

HTML:

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

CSS:

body {
    background: darkgrey;
}
li {
    display: block;
    list-style: none;
    width: 200px;
    height: 50px;
    background: darkgrey;
    position: relative;
    border: 2px solid lightblue;
    margin-top: 5px;
}

li:first-child:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: darkgrey;
    border-right: 2px solid lightblue;
    position: absolute;
    top: -17px;
    left: -17px;
    transform: rotate(45deg);
}