创建对角线边框半径

Question

在寻找解决方案之后，我找不到任何解决方案。我要做的是在第一个li元素的top left角上创建一个对角线边框..我尝试使用涉及background属性的解决方案，但它没有给我我想要的。此外，它不允许对以后需要的颜色进行任何操作。

淡蓝色应该是被切割的边框（而不是被切割的背景），深灰色应该是li的背景。

如何通过CSS实现这一目标？ JS / Jquery解决方案也可以使用。

编辑：在看到我的问题的许多错误解释后，我会稍微澄清一下：

左图是我现在拥有的，右图应该是结果。

.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;
        }
    }
}

Answer 1

如果我理解问题，您需要this

之类的内容

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);
}

<强>更新

使用border-radius无法实现。只是使用css形状，或像updated fiddle

这样的黑客

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);
}

Answer 2

如何实现这样的目标？没有border-radius属性 的 WORKING FIDDLE

还要看一下css-tricks上的 The Shapes of CSS 。

<强> HTML

<div class="square">
    <div class="cut-fold"></div>
</div>

<强> CSS

    body {
    background: #2D2D2D;
}
.square {
    background: #5E9EE8;
    position: relative;
    width: 300px;
    height: 300px;
}
.cut-fold {
    background: #2d2d2d;
    height: 75px;
    position: absolute;
    top: -34px;
    transform: rotate(45deg);
    width: 30px;
}