css - 仅调整一条边的大小

Question

你怎么能只调整块元素的一个边缘？我考虑过使用旋转（在另一边上变换原点，然后围绕中心旋转），但是当它放在视口上的另一个点上时（因为透视），它看起来会有所不同。我看到了 transform: matrix() 属性，但似乎这只允许缩放元素的局部向量。

有任何想法吗？

Answer 1

不知道你的情况是否边缘 = 边界。试试这个，如果是：

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