- From: Nikita Dubko via GitHub <sysbot+gh@w3.org>
- Date: Sat, 17 Feb 2018 20:35:15 +0000
- To: public-css-archive@w3.org
Some awesome use cases in [presentation](http://askd.rocks/pres/css/) by @askd:
<details><summary>Triangle</summary>
```css
/* http://askd.rocks/pres/css/#triangle */
.triangle {
position: relative;
width: var(--w);
height: var(--h);
overflow: hidden;
}
.triangle::before {
--a: arctan(var(--w) / var(--h));
content: '';
position: absolute;
left: 100%;
width: 100%;
height: 100% / cos(var(--a));
background: #000;
transform-origin: 0 0;
transform: rotate(var(--a));
}
```
</details>
<details><summary>Parallelogram</summary>
```css
/* http://askd.rocks/pres/css/#parallelogram1 */
.parallelogram {
--w: 400;
--h: 200;
position: relative;
width: calc(1px * var(--w));
height: calc(1px * var(--h));;
}
.parallelogram::before {
--angle: arcsin(var(--h) / var(--w));
content: '';
position: absolute;
width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
height: 100%;
transform-origin: 0 100%;
transform: skew(calc(0 - var(--angle)));
background: #000;
}
```
</details>
<details><summary>Diagonal background animation inside the button</summary>
```css
/* http://askd.rocks/pres/css/#example1 */
.button {
--h: 4em;
height: var(--h);
padding: 0 calc(var(--h) * tan(32deg));
font-size: 40px;
line-height: var(--h);
overflow: hidden;
text-align: left;
}
```
</details>
--
GitHub Notification of comment by MeFoDy
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2331#issuecomment-366469494 using your GitHub account
Received on Saturday, 17 February 2018 20:35:17 UTC