css中的尖锐左边框

假设我在

display:block

中有一个元素，其属性为

左边距：实心3px黑色

如何使边框在左上角有三个像素，在左下角有一个像素？这是我的意思的图表

---

在下面的例子中，我使用了

：after

通过添加

skew

.parent{
边框：1px纯黑；
宽度：200px；
高度：100px；
位置：相对位置；
溢出：隐藏；
利润率：20px；
}
.parent.left-border{
边界：0；
左边框：1px纯黑；
}
.家长：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：3倍；
背景：黑色；
-webkit变换：skewX（-2deg）；
变换：skewX（-2deg）；
底部：0；
变换原点：顶部；
}

---

使用

边框图像

：

b{
显示：块；
宽度：200px；
高度：100px；
背景：#ccc；
左边框：实心3px；
边框图像：线性渐变（到右下角，#000 50%，#fff 63%）0 100%/0 0 3px
}