Cut your image into pieces 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

Cut your image into pieces

Use CSS mask to cut your image into small pieces

Cut your image into small pieces using one CSS instruction.

A image cut into small pieces

img {
  --n: 10; /* number of rows */
  --m: 15; /* number of columns */
  --gap: 3px;
  mask:
    conic-gradient(from 90deg at var(--gap) var(--gap),#000 90deg,#0000 0) 
    calc(-1*var(--gap)) calc(-1*var(--gap))/
    calc((100% + var(--gap))/var(--m))
    calc((100% + var(--gap))/var(--n))
}

See cut image into small pieces by t_afif on CodePen.

---

More CSS Tips

• Equal width buttons to the widest one A few lines of code ot create equal width buttons. January 20, 2022
• Stick an element to the top-right corner Place an element on the top-right corner of your CSS grid. January 13, 2022
• Full screen height container Make your container fill all the screen height. December 15, 2021
• max-width + centering with one instruction Use max() to center your element and set a max-width. December 10, 2021

Cut your image into pieces

---

Use CSS mask to cut your image into small pieces