CSS 전용 더하기/십자가 아이콘

반응형

더하기 아이콘 ➕ 또는 십자가 아이콘 ✖️ 만들기

  • 하나의 요소
  • 의사 요소 없음
  • 하나의 그라데이션
  • 크기와 색상을 쉽게 조정할 수 있습니다.
.plus {
  --b: 10px;   /* the thickness*/
  --c: #0000 90deg,#000 0; /* the coloration */
  width: 50px; /* the size */
  aspect-ratio: 1;
  background:
    conic-gradient(from 90deg at var(--b) var(--b),var(--c)) 
    calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
    calc(50%  + var(--b))   calc(50%  + var(--b));
}
반응형