javascript - 使用 css 自定义宽度

Question

很抱歉提出此类问题。但我想知道我有一个 Parent Div，height 和 width 为 100px 它看起来像正方形。有没有办法像 top-width 和 bottom-width

那样单独自定义宽度

例如width适用于left to right，height适用于top to bottom如果 top-width 为 0 且 bottom width 为 100 ，height 为 100 那么它看起来像 triangle这是 FIDDLE 我想用不同的形状做同样的事情。是否有可能在 css 中实现这一点。任何建议都会很棒。

Answer 1

不，不可能那样做，而不是为了制作三 Angular 形或像梯形这样的形状，我们在 fiddle 中使用这样的边框宽度:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    margin:20px auto;
}

http://jsfiddle.net/7qbGX/

我们将div的主要内容设为0高0宽。然后使用 border-width 来解决这个问题。

诀窍在于，边框像相框一样在拐 Angular 处相交。因此，如果我们使两个边框不可见并减小其中一个的大小。它将形成一个三 Angular 形。更多详情可以引用this问题。

干杯!