css - 仅调整一条边的大小

Question

如何只调整 block 元素的一条边？我考虑过使用旋转(在另一条边上变换原点，然后围绕中心旋转)，但是当它被放置在视口(viewport)上的另一个点上时(由于透视)，它看起来会有所不同。我看到了 transform: matrix() 属性，但这似乎只允许缩放元素的局部向量。

有什么想法吗？

Answer 1

不知道在你的情况下 edge = border 是否。试试这个，如果是:

div {
    width:200px;
    height:150px;
}

.border {
    border:#CCCCCC 1px solid;
    border-radius: 5px;
}

.transition {
    transition: all 1s ease;
}

.border:hover {
    border-bottom-left-radius:20px 20px;
}

<div class="border transition"></div>

JSFIDDLE