그라디언트가있는 원형 화살표

Question

테두리로 만들려고했지만 그래디언트로 만들 수 없었습니다. 어쩌면 4 개의 div를 만들어서 그렇게 만들 수 있을까요?

Answer 1

CSS는 모양을 만들 수있는 가장 좋은 방법이 될하지 않을 수 있습니다. 대신 SVG를 사용해야합니다.

SVG의 path 요소를 사용하여 도형 화살표 모양을 만들고 linearGradient으로 만든 그래디언트로 채울 수 있습니다.

d은 도형을 정의하기 위해 path 요소에 하나만 사용됩니다. 이 속성 자체에는 여러 개의 짧은 명령과이 명령이 작동하는 데 필요한 매개 변수가 거의 없습니다. 당신은 이미 무엇을

body { 
 
    text-align: center; 
 
    background: #333; 
 
    margin: 20px; 
 
}

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <defs> 
 
    <linearGradient id="gradient"> 
 
     <stop offset="0" stop-color="#212121"></stop> 
 
     <stop offset="1" stop-color="#a7a7a7"></stop> 
 
    </linearGradient> 
 
    <path id="arrow" x="0" y="0" d="M0,200 
 
            A200,200 0, 0, 1, 200,0 
 
            L225,25 
 
            L200,50 
 
            A150,150, 0, 0, 0 50,200 
 
            L25,175" fill="url(#gradient)" /> 
 
    </defs> 
 

 
    <use xlink:href="#arrow" transform="translate(0,400) rotate(270)"></use> 
 
    <use xlink:href="#arrow" transform="translate(400,400) rotate(180)"></use> 
 
    <use xlink:href="#arrow" transform="translate(400,0) rotate(90)"></use> 
 
    <use xlink:href="#arrow"></use> 
 

 
</svg>