2c:null 2d:["$","title",null,{"children":"Slanted Box With CSS Value Functions | Quadbits Studio | Observable"}] 32:T499, ${md` ${Object.assign(h1.cloneNode(true), { id: +new Date(), style: "margin-bottom: 0" })} Computing a [Taylor series expansion][WOLFRAM_ALPHA] of ~~~JavaScript Math.tan(${toFixedPoint(alpha)}) ${ alpha == 0 ? '=' : `/* yields ${toFixedPoint(calc)} */ ≈` } ${iterate(toFixedPoint(alpha), function (x) { return (tuple) => `${tuple[0] / tuple[1]} * Math.pow(${x}, ${tuple[2]})`; }).replace(/ ([+*]) /g, "\n$1\n")} ~~~ Nifty! [WOLFRAM_ALPHA]: https://www.wolframalpha.com/input?i=taylor+series+tan+x `} 33:T4f1,The Maclaurin series valid for ${tex`\newcommand{\nbsp}{\nobreak\hspace{.0625ex}}- \frac{\pi}{2}\nbsp<\nbsp{x}\nbsp<\nbsp\frac{\pi}{2}`} for the tangent function is

${tex/* thank you, Mark McClure - mg */` \begin{aligned} \tan x &= \sum_{n=1}^{\infty} \frac{\left( -1 \right)^{n-1} 2^{2n} \left( 2^{2n}-1 \right) B_{2n}}{\left( 2n \right)!} \cdot x^{2n-1} \\ &= x + \frac{1}{3} \cdot x^3 + \frac{2}{15} \cdot x^5 + \frac{17}{315} \cdot x^7 + \frac{62}{2\,835} \cdot x^9 + \cdots \\ &= x + \frac{1}{3} \cdot x^3 + \frac{2}{15} \cdot x^3 \cdot x^2 + \frac{17}{315} \cdot x^5 \cdot x^2 + \frac{62}{2\,835} \cdot x^7 \cdot x^2 + \cdots \\ &= x + \frac{1}{3} \cdot x^2 \cdot x + \frac{2}{15} \cdot x^2 \cdot x^2 \cdot x + \frac{17}{315} \cdot x^2 \cdot x^2 \cdot x^2 \cdot x + \frac{62}{2\,835} \cdot x^2 \cdot x^2 \cdot x^2 \cdot x^2 \cdot x + \cdots \\ &= x + x^2 \left( \frac{1}{3} \cdot x + x^2 \left( \frac{2}{15} \cdot x + x^2 \left( \frac{17}{315} \cdot x + x^2 \left( \frac{62}{2\,835} \cdot x + \cdots \right) \right) \right) \right) \end{aligned} `}

(OEIS [A002430][A002430] and [A036279][A036279]), where ${tex`B_{n}`} is a Bernoulli Number. [A002430]: http://oeis.org/A002430 [A036279]: http://oeis.org/A03627934:[] 30:{"id":"0e312c9a650da16b","slug":"slanted-box-with-css-value-functions","title":"Slanted Box With CSS Value Functions","thumbnail":"3cc7435162cf2e24201e5e5cf1b1d51326ac7ccf875c5892b54d11d41a53ae90","access_level":"public","create_time":"$D2024-01-28T17:04:00.505Z","update_time":"$D2026-09-11T13:00:15.349Z","view_time":null,"first_public_time":"$D2024-01-28T17:04:00.505Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":85,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Slanted Box With CSS Value Functions","cells":[{"id":0,"value":"h1 = Object.assign(\n md`# Slanted Box
With CSS Value Functions`,\n {\n id: +new Date(),\n style: [\n \"position: absolute\",\n \"margin: -1px !important\",\n \"padding: 0\",\n \"border: 0\",\n \"height: 1px\",\n \"width: 1px\",\n \"clip: rect(0 0 0 0)\",\n \"overflow: hidden\",\n \"white-space: nowrap\",\n \"transform: scale(0)\",\n \"z-index: -1\"\n ].join(\"; \")\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof angle = Inputs.range([-15, 15], {\n label: \"Angle in degrees\",\n step: 1,\n value: -5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof overflow = Inputs.toggle({ label: \"Clip slopes\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof custom = Inputs.toggle({ label: \"Use CSS functions\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof nested = Inputs.toggle({ label: \"Nested expression\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"calc = function () {}.constructor.call(null, `return ${terms}`)() // emulate calc() CSS function…","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"Array.from(\n series,\n (tuple) => (tuple[0] / tuple[1]) * Math.pow(alpha, tuple[2])\n).reduce((a, b) => +a + +b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Math.tan(alpha)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"

Layouts with diagonal sections [have been] quite popular for several years now. It is not the new hot stuff […]. But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles.

— Nils Binder, Create Diagonal Layouts Like It’s 2020