border color에 gradient 넣으면서 가운데 공간을 투명하게 하는 법

 

위의 이미지를 만드려 했다. 생각보다 쉽지 않았다.디자이너님이 과감해지셨다..

 

처음에는 border-image를 사용했는데, border-image와 border-radius를 동시에 쓸 수 없음을 알고 구글링을 하였다.

이 블로그 를 참고하여 해결한 줄 알았지만, 가운데 공간을 텅 빈공간으로 만들지 못했다.

 

이 스택오버플로어 덕분에 해결했다.

차근차근

 

const ScrollIconWrapper = styled.div<{ color: string }>`
  width: 52px;
  height: 94px;

  padding: 10px;
  display: inline-block;
  position: relative;
  
  background: red;
  
`

위으 코드는 다음 빨간박스을 만든다.

가상 클래스 :before를 사용한다.

const ScrollIconWrapper = styled.div<{ color: string }>`
  width: 52px;
  height: 94px;

  padding: 10px;
  display: inline-block;
  position: relative;

  background: red;

  z-index:0;
  &:before {
    width: 52px;
    height: 94px;

    content: '';
    position: absolute;


    inset: 0;
    padding: 2px;
    border-radius: 30px;
    background: linear-gradient(180deg, #b2d1ff 0%, #2e69ff 100%);

  }
`

가상요소 before를 가리지 않게, 가상요소가 아닌 부분에 z-index:0을 추가해주었다.

 

그리고 가상요소에 boder-radius, background를 추가해주었다.
그라데이션 border를 추가하는 방법은 border대신 background를 이용하는 것이다.

위와 같이 css를 작성하면 다음과 같다.

 

mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

mask 속성을 추가한다.

mask 속성을 사용하여 특정 이미지를 가리거나 부분적으로 보여지게 할 수 있다.
(이미지에 mask 씌운 글, mdn)

 

mask-clip : content-box 속성을 통해 컨텐츠 부분에만 마스크를 씌운다.(직관적으로 이해가는 레퍼런스)

 

 

-webkit-mask-composite: xor;

-webkit-mask-composite: xor 을 통해 마스크부분을 투명하게 한다.

하지만 webkit-mask-composite는 모든 브라우저에서 적용되는것은 아니라고 한다..

 

다른 방법을 찾아야한다..

 

 

여튼 완성된 코드는 다음과 같다

const ScrollIconWrapper = styled.div<{ color: string }>`
  width: 52px;
  height: 94px;

  padding: 10px;
  display: inline-block;
  position: relative;
  z-index: 0;

  &:before {
    width: 52px;
    height: 94px;
    aspect-ratio: 1;
    content: '';
    position: absolute;

    z-index: -1;
    inset: 0;
    padding: 2px;
    border-radius: 30px;
    background: linear-gradient(180deg, #b2d1ff 0%, #2e69ff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  span {
    position: absolute;
    top: 23px;
    left: 13px;
    text-align: center;
    letter-spacing: -0.025em;

    color: #b2d1ff;

    ${({ theme }) => theme.texts['coz-text-xs'][700]}
  }
  @keyframes scroll {
    0% {
      bottom: 15px;
    }
    100% {
      bottom: 5px;
    }
  }
  .arrow {
    position: absolute;
    bottom: 15px;
    left: 28px;
    transform: translate(-50%, -50%);
    animation: scroll 1.5s infinite;
  }
`;
const ScrollIcon = ({ color }: { color: string }) => {
  return (
    <ScrollIconWrapper color={color}>
      <span>scroll</span>
      <a href="#scroll-from-introduce-to-outline">
        <img className="arrow" src="/assets/pmb/introduce-arrow.png" />
      </a>
    </ScrollIconWrapper>
  );
};