unocss-chamfer

UnoCSS rules for chamfered corners

Installation

npm install --save-dev @yet3/unocss-chamfer 

uno.config.ts

import { defineConfig } from "unocss";
import chamfer from "@yet3/unocss-chamfer";

export default defineConfig({
  ...
  rules: [
    ...chamfer.rules,
    ...
  ]
});

Usage

// corners
chamfer-<num>
chamfer-<num>-<num>
chamfer-<num>-<num>-<num>
chamfer-<num>-<num>-<num>-<num>
chamfer-tl-<num>
chamfer-tr-<num>
chamfer-br-<num>
chamfer-bl-<num>

// border
chamfer-border-<num>
chamfer-border-$colors

Examples

  <div
    class="w-60 h-30 bg-red-500 chamfer-55-20-0-10"
  />

  <div
    class="w-60 h-30 bg-red-500 chamfer-br-40 chamfer-border-1 chamfer-border-white"
  />

  <div
    class="w-60 h-30 chamfer-br-25 chamfer-tr-40 chamfer-border-yellow-300 chamfer-border-9"
  />