Press/to search

Patterns

Rhombus v1.1.2

Utilities for sets an element's background rhombus pattern.


Class

classcss
pattern
rhombus-sm
background-image: linear-gradient(135deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%)
background-position: 10px 0, 10px 0, 0 0, 0 0
background-size: 10px 10px
background-repeat: repeat
pattern
rhombus-md
background-image: background-image: linear-gradient(135deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%)
background-position: 20px 0, 25px 0, 0 0, 0 0
background-size: 25px 25px
background-repeat: repeat
pattern
rhombus-lg
background-image: background-image: linear-gradient(135deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%)
background-position: 50px 0, 50px 0, 0 0, 0 0
background-size: 50px 50px
background-repeat: repeat
pattern
rhombus-xl
background-image: background-image: linear-gradient(135deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(315deg, currentColor 25%, transparent 25%)
background-position: 100px 0, 100px 0, 0 0, 0 0
background-size: 100px 100px
background-repeat: repeat

Usage

Set basic rhombus pattern.

<!-- Example -->
<y class="pattern rhombus-sm ... h-32 w-full">
...
</y>

Set pattern with color by using text-{color} utility. (See Text Color).

<!-- Example -->
<y class="pattern rhombus-sm text-amber-400 ... h-32 w-full">
...
</y>

Set pattern with foreground and background colors by using text-{color} and bg-{color}utilities. (See Text Color, Background Color).

<!-- Example -->
<y class="pattern rhombus-sm text-amber-400 bg-red-500 ... h-32 w-full">
...
</y>

Set pattern clipping with text.

TEXT
<!-- Example -->
<y class="pattern rhombus-sm clip-text text-red-500">
<y>
TEXT
</y>
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.