Re: [csswg-drafts] [css-logical] flow-relative gradients (#1724) from Carlos Lopez via GitHub on 2023-03-03 (public-css-archive@w3.org from March 2023)

From: Carlos Lopez via GitHub <sysbot+gh@w3.org>
Date: Fri, 03 Mar 2023 14:28:28 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-1453613496-1677853706-sysbot+gh@w3.org>

Using multiple masks to ensure top/end is exactly 50% to replicate:

https://m3.material.io/styles/shape/shape-scale-tokens

![image](https://user-images.githubusercontent.com/9271155/222744972-304f8d09-5262-4125-8c8e-450c30cc52c7.png)

````css
.shape[shape-end] {
  --mdw-shape__size__top-start-size: 0px;
  --mdw-shape__size__bottom-start-size: 0px;
  --mdw-shape__mask: linear-gradient(to left, transparent 50%, black 50%);
}

.shape {
    -webkit-mask-box-image: var(--mdw-shape__mask-border-source) 8 fill / var(--mdw-shape__size) stretch;
    -webkit-mask: var(--mdw-shape__mask);
}
````

The "to left" isn't going to work with RTL.



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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 3 March 2023 14:28:29 UTC