Javascript 创建对角线边界半径

在为这个问题寻找了一段时间后，我没有找到一个解决方案。我要做的是在第一个

li

元素的

左上角创建一个对角线边框。。我尝试使用一个涉及
background
属性的解决方案，但它并没有完全满足我的需求。此外，它不允许任何操作的颜色，这将需要以后

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

如何通过CSS实现这一点？JS/Jquery解决方案也可以

编辑：在看到我的问题有很多被误解的答案后，我会稍微澄清一下：

左图是我现在看到的，右图应该是结果



若我理解这个问题，你们需要像这样的东西

HTML:

更新：

使用边界半径无法实现。只是使用css形状，或者像这样的黑客

HTML:

这样做怎么样？没有
边界半径
属性

还可以看看css技巧的

HTML

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

你的边框（浅蓝色）在背景（暗灰色）中如何？@BogdanKuštan不是。我将背景设置为浅蓝色，这样您就可以看到问题，因为背景是深灰色的。目前还无法通过
边界半径
实现这一点，但建议对该属性进行增强，使您能够完全执行所需操作（搜索“css角形”）。同时，将这种效果应用于边界将有点不寻常。有很多关于用这种方法对无边界背景进行倒角的问题，在Bogdan Kuštan的回答中有一个解决方案，但我不确定边界是否存在。@Chrillewoodz:我知道你已经接受了答案。是另一种使用伪元素和边框图像的方法（浏览器支持较少）。“如果你愿意的话，我会加上作为答案。”哈利，我试着修改你的小提琴，但除非你有一个大的边框，否则它似乎不起作用。对吗？不完全是我需要的。我需要边框本身是对角线，而不是背景。@chipChocolate.py您不能使用
边框半径
。关键字半径为圆形或圆形elipsis@BogdanKuštan——没错。我正要在主帖上对此发表评论。@Chrillewoodz你不能用
边界半径
来实现。仅仅使用css形状，或者像查看预期结果图像这样的技巧，您的两个答案（@theparagratick）都没有比我现有的尝试更好地实现它。
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

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

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

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

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

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