visual-lab

shape-notched-corner

Carte à coin chanfreiné

Donner à un aplat coloré une signature de forme reconnaissable — UN coin coupé à 45° — sans rien ajouter au contenu ni recourir à un rayon, une ombre ou un liseré.

shapeslideweb208×200px3 benchmarks

Télécharger le .zip

Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.

Employer quand

Sur les aplats d'accent d'un deck ou d'une landing qui doivent se reconnaître d'une slide à l'autre : carte statistique, carte de second rang, pastille de glyphe. Une seule orientation par famille de contenu.

Éviter quand

Sur une image (la coupe se lit comme un recadrage raté), sur une carte du même fond que la slide (la coupe devient invisible et le lecteur ne voit qu'un angle sale), ou sur plus d'un coin — deux coins coupés font un losange, pas une signature.

Notes

La coupe se fait en LONGUEUR, pas en pourcentage : `clip-path: polygon(... calc(100% - var(--vl-notch)) ...)`. Un pourcentage résout indépendamment sur X et Y, donc la coupe n'est plus à 45° dès que la carte n'est pas carrée — c'est la faute qui rend la charte méconnaissable. Le token vaut ~7,5 % de la largeur de la carte : à l'échelle d'une slide 1600×900, 32 à 36 px. En .pptx la même forme se fabrique en freeform 5 points (voir `pptx.emitter`), pas en rectangle à coin arrondi.

Mots-clés

chanfreinnotchcoinclip-pathcarteaplatformesignaturedeckcorporate

Benchmarks — la géométrie, en assertions vérifiables

Rejouables par node bin/check.mjs shape-notched-corner : le pattern se prouve, il ne se croit pas.

assertionmesureattendu
chanfrein ≈ 7,5 % de la largeur (br)notch('.vl-nc--br') / W0.075 ± 0.025
les 4 orientations coupent de la MÊME longueurMath.max(notch('.vl-nc--br'),notch('.vl-nc--tr'),notch('.vl-nc--bl'),notch('.vl-nc--tl')) - Math.min(notch('.vl-nc--br'),notch('.vl-nc--tr'),notch('.vl-nc--bl'),notch('.vl-nc--tl'))0 ± 0.5
un seul coin coupé : la coupe reste sous 12 % de la petite dimensionnotch('.vl-nc--br') / Math.min(W, H)≤ 0.2

Le code

fragment — patterns/shape-notched-corner.html Télécharger
<!-- shape-notched-corner — la surface chanfreinée seule, 4 orientations.
     Couleurs via --vl-* uniquement. La taille du chanfrein est une LONGUEUR (px), jamais un
     pourcentage : en % le clip-path résout chaque axe séparément et la coupe n'est plus à 45°
     sur un rectangle non carré. -->
<div class="vl-nc-row">
  <div class="vl-nc vl-nc--br" style="background:var(--vl-orange)"></div>
  <div class="vl-nc vl-nc--tr" style="background:var(--vl-steel)"></div>
  <div class="vl-nc vl-nc--bl" style="background:var(--vl-orange)"></div>
  <div class="vl-nc vl-nc--tl" style="background:var(--vl-steel)"></div>
</div>

<style>
/* Grille 2×2 et non rangée de 4 : les tuiles de démonstration doivent avoir la PROPORTION
   d'une vraie carte (~430×300). Quatre tuiles côte à côte sur 880 px donnent 200 px de large,
   où le même chanfrein pèse 17 % — la démo mentirait sur le pattern qu'elle illustre. */
.vl-nc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 880px; }
.vl-nc {
  /* ~7,5 % de la largeur de la carte : en dessous de 5 % la coupe passe pour un défaut de
     rendu, au-delà de 10 % elle devient un losange et vole la vedette au contenu. */
  --vl-nc-size: var(--vl-notch, 32px);
  height: 300px;
}
.vl-nc--br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--vl-nc-size)), calc(100% - var(--vl-nc-size)) 100%, 0 100%); }
.vl-nc--tr { clip-path: polygon(0 0, calc(100% - var(--vl-nc-size)) 0, 100% var(--vl-nc-size), 100% 100%, 0 100%); }
.vl-nc--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--vl-nc-size) 100%, 0 calc(100% - var(--vl-nc-size))); }
.vl-nc--tl { clip-path: polygon(var(--vl-nc-size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--vl-nc-size)); }
</style>
tokens de la charte — systems/ref-06-orange-notched.json Télécharger
:root {
  --vl-bg: #F0EFEC;
  --vl-board: #DEDDD9;
  --vl-white: #FFFFFF;
  --vl-black: #141414;
  --vl-orange: #F2551E;
  --vl-steel: #C6D0CF;
  --vl-ink-muted: #6A6A67;
  --vl-ink-muted-invert: #FFF1E9;
  --vl-ink-on-steel: #3E4746;
  --vl-hairline: #00000015;
  --vl-ph-a: #C9C9C9;
  --vl-ph-b: #4C4C4C;
  --vl-ph-dark-a: #6A6A6A;
  --vl-ph-dark-b: #141414;
  --vl-notch: 34px;
  --vl-margin: 60px;
}
les métadonnées — patterns/shape-notched-corner.json (télécharger) 
{
  "name": "Carte à coin chanfreiné",
  "family": "shape",
  "ref": "ref-06-orange-notched",
  "intent": "Donner à un aplat coloré une signature de forme reconnaissable — UN coin coupé à 45° — sans rien ajouter au contenu ni recourir à un rayon, une ombre ou un liseré.",
  "when_to_use": "Sur les aplats d'accent d'un deck ou d'une landing qui doivent se reconnaître d'une slide à l'autre : carte statistique, carte de second rang, pastille de glyphe. Une seule orientation par famille de contenu.",
  "avoid_when": "Sur une image (la coupe se lit comme un recadrage raté), sur une carte du même fond que la slide (la coupe devient invisible et le lecteur ne voit qu'un angle sale), ou sur plus d'un coin — deux coins coupés font un losange, pas une signature.",
  "tags": [
    "chanfrein",
    "notch",
    "coin",
    "clip-path",
    "carte",
    "aplat",
    "forme",
    "signature",
    "deck",
    "corporate"
  ],
  "vars": [
    {
      "name": "--vl-notch",
      "role": "longueur de la coupe à 45° (≈ 7,5 % de la largeur de la carte)",
      "default": "32px"
    },
    {
      "name": "--vl-orange",
      "role": "aplat d'accent",
      "default": "#F2551E"
    },
    {
      "name": "--vl-steel",
      "role": "aplat de second rang",
      "default": "#C6D0CF"
    }
  ],
  "slots": [],
  "geometry": {
    "root": ".vl-nc--br",
    "frame": [
      208,
      200
    ],
    "ratios": {
      "notch_over_width": 0.075
    }
  },
  "benchmarks": [
    {
      "name": "chanfrein ≈ 7,5 % de la largeur (br)",
      "measure": "notch('.vl-nc--br') / W",
      "expect": 0.075,
      "tol": 0.025
    },
    {
      "name": "les 4 orientations coupent de la MÊME longueur",
      "measure": "Math.max(notch('.vl-nc--br'),notch('.vl-nc--tr'),notch('.vl-nc--bl'),notch('.vl-nc--tl')) - Math.min(notch('.vl-nc--br'),notch('.vl-nc--tr'),notch('.vl-nc--bl'),notch('.vl-nc--tl'))",
      "expect": 0,
      "tol": 0.5
    },
    {
      "name": "un seul coin coupé : la coupe reste sous 12 % de la petite dimension",
      "measure": "notch('.vl-nc--br') / Math.min(W, H)",
      "max": 0.2
    }
  ],
  "pptx": {
    "primitive": "notched_rect",
    "emitter": "kit/vl_pptx.py:notched_rect",
    "pattern": "shape-notched-corner"
  },
  "notes": "La coupe se fait en LONGUEUR, pas en pourcentage : `clip-path: polygon(... calc(100% - var(--vl-notch)) ...)`. Un pourcentage résout indépendamment sur X et Y, donc la coupe n'est plus à 45° dès que la carte n'est pas carrée — c'est la faute qui rend la charte méconnaissable. Le token vaut ~7,5 % de la largeur de la carte : à l'échelle d'une slide 1600×900, 32 à 36 px. En .pptx la même forme se fabrique en freeform 5 points (voir `pptx.emitter`), pas en rectangle à coin arrondi.",
  "id": "shape-notched-corner"
}

À côté