Html 带衬里的自定义CSS角

我知道这样的拐角是可能的：

。左角{
宽度：0；
身高：0；
边框顶部：100px固体粉末蓝色；
左边框：100px实心透明；
}

---

如果您希望它与您发布的图像完全相同，您可以使用peusdo元素并将其置于原始元素之上

请参阅下面的代码片段

。左角{
宽度：0；
身高：0；
边框顶部：120px纯红；
左边框：120px实心透明；
位置：相对位置；
}
.左角：在{
内容：“；
位置：绝对位置；
顶部：-120px；
左：-100px；
边框顶部：100px固体粉末蓝色；
左边框：100px实心透明；
}

根据您对边框额外高度的要求（红色）…

…为此使用伪类：after，使用

position:absolute

…使您的div宽度和高度等于边框宽度，即100px，并应用

box size:border box

…高度值由1002+1002的平方根计算（因为100是您的边框宽度）加上根据您的要求增加的宽度（即在这种情况下6）

…

left

值将是

边框宽度的一半

…

top

值将是

（边框宽度+高度）/2

堆栈片段

。左角{
宽度：100px；
高度：100px；
边框顶部：100px固体粉末蓝色；
左边框：100px实心透明；
位置：相对位置；
框大小：边框框；
}
.左角：后角{
内容：“；
位置：绝对位置；
顶部：-123.4213px；
左：-52px；
宽度：6px；
背景：红色；
高度：147.4213px；
变换：旋转（-45度）；
边界半径：4px；
}

---

您可以使用

transform:skew（）

完成复杂的边框布局，如下所示：

*{
保证金：0；
填充：0；
}
.左角{
宽度：0；
身高：0；
边框顶部：100像素纯黑；
左边框：100px实心透明；
}
.左角：在{
内容：“；
位置：绝对位置；
顶部：50px；
左：0px；
边框顶部：10px纯红；
左边框：100px实心红色；
变换：倾斜（0度，45度）；
}

---

这里有一个简单的

线性梯度的简单解决方案：


正文{
背景：粉红色；
}
.左角{
宽度：100px；
高度：100px；
背景：线性渐变（右上角，透明50%，红色50%，红色54%，蓝色54%）；
}
你试过做两个div，一个比另一个大一点吗？