CSS를 활용한 다양한 웹 아이콘 제작 방법 예시

이 기사에서는 순수 CSS를 사용하여 다양한 웹 아이콘(삼각형, 일시 정지 버튼, 다운로드 화살표, 더하기 기호 등)을 만드는 데 관련된 정보를 주로 소개합니다. 참고해 보세요. 모두에게 도움이 되기를 바랍니다.

삼각형

<p class="box"></p>
<style>
.box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid red;
}
</style>

평행사변형 아이콘

<p class="box"></p>
<style>
 .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            background-color: red;
            transform: skew(-25deg);
        }
</style>

일시중지 버튼

<p class="box"></p>
    <style>
        .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            color: #000;
            border: 1px solid;
            border-radius: 50%;
            outline: 10px solid;
            outline-offset: -26px;
        }
    </style>

일시 정지 버튼의 구현 원리는 다음과 같습니다. 테두리의 테두리, 내부 사각형의 윤곽선을 사용합니다. 아웃라인에는 오프셋을 설정하는 데 사용할 수 있는 오프셋 속성이 있고 비율을 기반으로 하기 때문입니다.

실제로 아웃라인 오프셋 값을 조금 더 작게 설정하면 추가 후 나타나게 됩니다

더하기 기호

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
    }
</style>

다시 회전시키면 닫기 버튼이 됩니다

닫기 버튼

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
        transform: rotate(45deg);
    }

버거 버튼

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 0px;
        margin: 100px auto;
        box-shadow: 36px 10px 0 3px red,
        36px 0 0 3px red,
        36px 20px 0 3px red;
    }
</style>

버거 버튼 2:

<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 3px;
        margin: 100px auto;
        padding: 2px 0;
        border-top: 3px solid red;
        border-bottom: 3px solid red;
        background-clip: content-box;
        background-color: red;
    }
</style>

라디오 버튼

box-shadow는 비례적으로 크기가 조정되므로 첫 번째 값을 흰색으로 설정하고 두 번째 값을 첫 번째 값보다 크게 설정합니다

<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
    }
</style>

원 안의 십자 표시

<p class="box"></p>
<style>
    .box {
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
        outline: 36px solid #fff;
        outline-offset: -50px;
    }
</style>

필드 아이콘

<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        border: 3px solid red;
        outline: 6px dotted red;
        outline-offset: 6px;
    }
</style>

다운로드 화살표

테두리를 사용하여 삼각형을 만들고 상자 그림자를 사용하여 사각형을 만듭니다. 주로 오프셋을 사용합니다

<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        color: red;
        border: 8px solid transparent;
        border-top: 8px solid red;
        box-shadow: 0 -12px 0 -4px;
    }
</style>

북마크

이 효과를 얻는 원리는 삼각형을 배경색으로 설정하여 속이 빈 삼각형이 나타나도록 하는 것입니다

<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 8px;
        background-color:orange;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }
</style>

두 개의 반원 아이콘

이것은 비교적 간단하며 다음을 통해 구현됩니다. 그라데이션 기능, 그리고 둥근 테두리

<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        background-image: linear-gradient(to right,#ccc 50%,#000 50%);
    }
</style>

아이콘 비활성화

바깥쪽 원에 둥근 테두리를 사용하고 그라데이션을 사용하여 안쪽에 수직선을 만든 다음 회전을 사용하면 됩니다. attribute

<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        border:2px solid #000;
        background: linear-gradient(to right,#fff  45%,#000 45%,#000 45%,#fff 55%);
        transform: rotate(40deg);
    }
</style>

왼쪽 및 오른쪽 화살표 아이콘

삼각형을 하나 만들 수 있으니 삼각형도 두 개 만들 수 있습니다.

<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 0;
        margin: 100px auto;
        border: 10px solid transparent;
        border-left: 10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
    }
</style>

는 Chrome 브라우저에서 열어야 합니다. 다른 브라우저에서는

독수리 부리 아이콘

<p class="box"></p>
<style>
    .box {
       width: 32px;
        margin: 100px auto;
        border-top: 50px solid transparent;
        border-right: 22px solid #096;
        border-bottom-right-radius: 100%;;
    }
</style>

을 지원하지 않을 수 있기 때문입니다.

위 내용은 CSS를 활용한 다양한 웹 아이콘 제작 방법 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!