Polygon 多边形
显示一些多边形,例如:三角形、菱形、六边形、梯形等;全部采用 clip-path 实现
演示
基础用法
默认提供了多种三角形,只需要配置 shape
属性即可。
自定义菱形
传递 shape
为 rhombus
。然后自己定义 nt-polygon-rhombus
样式即可。同时可以通过 background
设置图形颜色
API
Shape Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
shape | string | 形状 | - |
background | string | 背景色 | - |
样式变量
变量名 | 默认值 | 说明 |
---|---|---|
--nt-polygen-size | 10px | 多边形大小 |
--nt-polygen-width | var(--nt-polygen-size) | 多边形宽度 |
--nt-polygen-height | var(--nt-polygen-size) | 多边形高度 |
--nt-polygen-background | #666 | 多边形背景色 |