@@ -269,23 +269,42 @@ Corner Shaping: the 'corner-shape' property</h3>
269
269
<dt> <dfn>''round''</dfn>
270
270
<dd> Border radii define a convex elliptical curve at the corner.
271
271
<dt> <dfn>''angle''</dfn>
272
+ <dd> Border radii define a diagonal slice at the corner.
272
273
</dl>
273
274
274
275
<div class="example">
275
276
For example, the following declarations create a right-pointing next button.
276
277
<pre>
277
278
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
+ }
281
283
</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('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> ') no-repeat 0 / auto 100%'>
292
+ Next
293
+ </div>
282
294
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>
284
303
</div>
285
304
286
305
<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 ?
289
308
290
309
<h3 id="corners-shorthand">
291
310
Corner Shape and Size: the 'corners' shorthand</h3>
0 commit comments