Please advise the layout idea of this kind of dividing line.

clipboard.png

as shown in the UI diagram, there is a dividing line between the first-tier category and the second-tier category, the second-tier category and the third-tier category, and the dividing line between the two second-tier categories increases with the number of third-tier categories under the above second-tier category.

is there a better layout for this kind of dividing line? The project uses react + antd-design. Thank you in advance

Antdesign react.js javascript css html5
May.12,2022

think of an implementation: define the lower left border through pseudo classes, splice them together through absolute positioning, and then get the first pseudo class. Setting only the lower border
alone feels feasible. If you haven't tried, you can try
clipboard.png

.

Previous: How can golang sql.RawBytes be converted to variables of the actual type?

Next: Html2canvas screenshot missing some elements

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e8091a-ae9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e8091a-ae9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?