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

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 2209 days ago, the information mentioned may be changed or developed.

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 replies • 2020-05-15 11:08:05 +08:00

hackyuan

Apr 21, 2020

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

p8YFk4f3E8SJ3aEv

Apr 21, 2020

再套一个盒子。。。。

lukeshawn

May 7, 2020

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

lukeshawn

May 7, 2020

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

May 15, 2020

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