创建对角线边框半径

Question

在寻找解决方案一段时间后，我并没有找到什么解决办法。我的目标是在第一个 li 元素的 左上角 创建对角边框。我尝试了使用涉及 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;
        }
    }
}

- Chrillewoodz

---

你的边框（浅蓝色）和内部背景（深灰色）怎么样了？ - Bogdan Kuštan

@BogdanKuštan 不是这样的。我把背景设为浅蓝色，这样你就可以看到问题了，因为背景是深灰色的。 - Chrillewoodz

这还不能通过 border-radius 实现，但是对该属性的建议增强将允许您准确地做到您要找的效果（搜索“CSS角形状”）。与此同时，将此效果应用于边框将有些棘手。关于以这种方式倾斜无边框背景的问题有许多疑问，在Bogdan Kuštan的答案中提供了解决方案，但我不确定是否存在适用于边框的解决方法。 - BoltClock

@Harry，我喜欢你的答案，但是在测试一些元素操作后，需要比已有的答案更多的代码。 - Chrillewoodz

@Chrillewoodz：可能是这样，正如我之前提到的，浏览器对于border-image的支持也相对较少，因此我会将其留在注释中以便日后参考 :) - Harry

Answer 1

如果我理解问题正确，您需要像这样的东西。

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形状或类似于此处更新的代码的hack方法。

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

- Bogdan Kuštan

---

不太符合我的需求。我需要边框本身是对角线，而不是背景。 - Chrillewoodz

@chipChocolate.py，你不能使用border-radius来实现。关键字radius指的是圆形或椭圆形。 - Bogdan Kuštan

@BogdanKuštan - 没错。我正要在主贴上发表评论。 - Weafs.py

@Chrillewoodz 你无法使用 border-radius 实现。只能使用 CSS 形状或类似 这个更新的 fiddle 的 hack。 - Bogdan Kuštan

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

- Aamir Shahzad

---

看一下期望的结果图像，你们两个的答案（@ThePragmatick）都没有比我的现有尝试更好。 - Chrillewoodz