如何使用 border 实现 4 边长度不一时不会地斜切啊

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1712 天前的主题，其中的信息可能已经有所发展或是发生改变。

div { box-sizing: border-box; width: 400px; height: 100px; border-style: solid; border-width: 1px 1px 1px 10px; border-color: red red red skyblue; }

5 条回复 • 2020-05-15 11:08:05 +08:00

hackyuan

2020-04-21 09:06:02 +08:00

详细的看 MDN 文档说明，或者用小工具 https://9elements.github.io/fancy-border-radius/

f056917

2020-04-21 09:08:36 +08:00

再套一个盒子。。。。

lukeshawn

2020-05-07 11:01:40 +08:00

@hackyuan 这个工具跟我这个需求没关系啊

lukeshawn

2020-05-07 11:03:55 +08:00

@f056917 怎么套啊,需要用到 position 么

dfkjgklfdjg

2020-05-15 11:08:05 +08:00

外部套一个容器,然后容器做 border-left,内部的 border-left 为 0;
demo: https://codepen.io/yogwang/pen/MWaqVBX