V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
lukeshawn
V2EX  ›  CSS

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

  •  
  •   lukeshawn · Apr 21, 2020 · 2802 views
    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
        1
    hackyuan  
       Apr 21, 2020   ❤️ 1
    详细的看 MDN 文档说明,或者用小工具 https://9elements.github.io/fancy-border-radius/
    p8YFk4f3E8SJ3aEv
        2
    p8YFk4f3E8SJ3aEv  
       Apr 21, 2020
    再套一个盒子。。。。
    lukeshawn
        3
    lukeshawn  
    OP
       May 7, 2020
    @hackyuan 这个工具跟我这个需求没关系啊
    lukeshawn
        4
    lukeshawn  
    OP
       May 7, 2020
    @f056917 怎么套啊,需要用到 position 么
    94
        5
    94  
       May 15, 2020
    外部套一个容器,然后容器做 border-left,内部的 border-left 为 0;
    demo: https://codepen.io/yogwang/pen/MWaqVBX
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1071 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 18:37 · PVG 02:37 · LAX 11:37 · JFK 14:37
    ♥ Do have faith in what you're doing.