Re: [csswg-drafts] [css-grid][css-flexbox][css-multicol] Styling Gaps/Gutters (#2748) from 一丝 via GitHub on 2020-04-30 (public-css-archive@w3.org from April 2020)

From: 一丝 via GitHub <sysbot+gh@w3.org>
Date: Thu, 30 Apr 2020 17:08:12 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-621983931-1588266491-sysbot+gh@w3.org>

I like the idea of `rule` and `rule-image`. There are many coupon styles in [Chinese shopping websites](https://mo.m.taobao.com/union/direct-sale/uland?itemId=601684141724), and there is usually a dotted line (or image) between them. It is not appropriate to use border to achieve it, its height is not 100%.

![image](https://user-images.githubusercontent.com/2784308/80738629-ea6a5f00-8b47-11ea-96bd-b43ee84cfbb4.png)


However, I did not expect what to use for the upper and lower semicircles. The corner-shape can only cut four corners, not the middle of the element. I wrote a [demo using CSS Houdini](https://yisibl.github.io/houdini-demo/corner/index.html):

![image](https://user-images.githubusercontent.com/2784308/80738761-0ff76880-8b48-11ea-92f0-3854647082fb.png)


-- 
GitHub Notification of comment by yisibl
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931 using your GitHub account

Received on Thursday, 30 April 2020 17:08:14 UTC