Skip to content

Commit 31a9e21

Browse files
committed
[css-backgrounds-4] Add example for angle corner-shape, re-add definition of angle, reword issue
1 parent df94ea2 commit 31a9e21

File tree

1 file changed

+25
-6
lines changed

1 file changed

+25
-6
lines changed

css-backgrounds-4/Overview.bs

+25-6
Original file line numberDiff line numberDiff line change
@@ -269,23 +269,42 @@ Corner Shaping: the 'corner-shape' property</h3>
269269
<dt><dfn>''round''</dfn>
270270
<dd>Border radii define a convex elliptical curve at the corner.
271271
<dt><dfn>''angle''</dfn>
272+
<dd>Border radii define a diagonal slice at the corner.
272273
</dl>
273274

274275
<div class="example">
275276
For example, the following declarations create a right-pointing next button.
276277
<pre>
277278
a {
278-
border-radius: 0 2em 2em 0;
279-
corner-shape: angle;
280-
padding: 0.5em 2em 0.5em 0.5em;
279+
border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
280+
corner-shape: round angle angle round;
281+
padding: .5em 1em .5em .5em;
282+
}
281283
</pre>
284+
<div style='font: bold 200%/1 sans-serif;
285+
width: 2.3em;
286+
padding: .5em 1em .5em .5em;
287+
border-radius: .3em 0 0 .3em;
288+
background: url(&apos;data:image/svg+xml,\
289+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40">\
290+
<path d="m 0 0 h 65 l 10 20 l -10 20 h -65 z" fill="yellowgreen" />\
291+
</svg>&apos;) no-repeat 0 / auto 100%'>
292+
Next
293+
</div>
282294
As a fallback in UAs that don't support 'border-radius',
283-
the right side would be rounded rather than pointy.
295+
the right side would be rounded rather than pointy:
296+
<div style='font: bold 200%/1 sans-serif;
297+
width: 2.3em;
298+
padding: .5em 1em .5em .5em;
299+
border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
300+
background: yellowgreen'>
301+
Next
302+
</div>
284303
</div>
285304

286305
<p class="issue">
287-
Add a ''cubic-bezier()'' function for random other shapes?
288-
Or some other functions?
306+
How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
307+
Something else?
289308

290309
<h3 id="corners-shorthand">
291310
Corner Shape and Size: the 'corners' shorthand</h3>

0 commit comments

Comments
 (0)