CSS에서 자주 나타나는 이상한 버튼 스타일 요약-프런트엔드 Q&A-php.cn

이 글은 디자인 초안에 자주 등장하는 몇 가지 버튼을 기반으로 CSS를 사용하여 구현하기가 다소 어렵고 까다롭습니다. 이를 CSS를 사용하여 최대한 구현하는 방법을 설명합니다. 그것이 모두에게 도움이 되기를 바랍니다.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

먼저 일반적으로 볼 수 있는 버튼 모양을 살펴보겠습니다.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

직사각형 및 둥근 버튼

일반적으로 다음과 같은 두 가지 유형의 버튼이 있습니다. - 직사각형 및 둥근 모서리:

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

너비, 높이, 둥근 모서리 및 배경색으로 매우 간단합니다.

    <div class=&#39;btn rect&#39;>rect</div>
    <div class=&#39;btn circle&#39;>circle</div>

로그인 후 복사

.btn {
    margin: 8px auto;
    flex-shrink: 0;
    width: 160px;
    height: 64px;
}
.rect {
    background: #f6ed8d;
}
.circle {
    border-radius: 64px;
    background: #7de3c8;
}

로그인 후 복사

사다리꼴과 평행사변형

다음으로는 직사각형의 변형을 바탕으로 사다리꼴과 평행사변형 버튼이 자주 등장합니다.

이를 달성하려면 주로 변환을 사용할 수 있지만 변환을 사용한 후에는 레이블의 텍스트도 같은 방식으로 변형되므로 일반적으로 요소의 의사 요소를 사용하여 스타일을 지정합니다. 버튼 안에 있는 텍스트에는 영향을 주지 않습니다.

평행사변형

위 사항에 주의하고 요소의 의사 요소를 사용하여 내부 텍스트에 영향을 주지 않고 평행사변형을 구현하세요.

<div class=&#39;btn parallelogram&#39;>Parallelogram</div>

로그인 후 복사

.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #03f463;
        transform: skewX(15deg);
    }
}

로그인 후 복사

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

의사 요소를 사용하지 않으려면 변형: SkewX() 외에도 그라데이션을 사용하여 평행사변형을 구현할 수도 있습니다.

아마도 다음과 같습니다:

{
    background: linear-gradient(45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0);
}

로그인 후 복사

사다리꼴

사다리꼴은 평행사변형보다 약간 더 복잡하며 실제로 특정 3D 변환을 사용합니다. 원리는 다음과 같이 X축을 중심으로 회전하는 직사각형입니다.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

원근감 및 변형 사용:rotateX() 물론 함께 작성할 수도 있습니다.

<div class=&#39;btn trapezoid&#39;>Trapezoid</div>

로그인 후 복사

.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;
    &::after {
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform: perspective(40px) rotateX(10deg);
          transform-origin: bottom;
          background: #ff9800;
    }
}

로그인 후 복사

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

모서리 자르기 -- 솔리드 컬러 배경 및 그라데이션 배경

다음 단계는 모서리를 자르는 것입니다. 가장 일반적인 방법은 주로 그라데이션 선형 그라데이션을 사용하여 이를 달성하는 것입니다.

<div></div>

로그인 후 복사

notching {
    background: linear-gradient(135deg, transparent 10px, #ff1493 0);
    background-repeat: no-repeat;
}

로그인 후 복사

결과는 다음과 같습니다.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약 이를 바탕으로 4개의 그래픽을 구현하려면 여러 그라데이션을 사용하고 네 모서리를 배치하려면 배경 위치를 사용하면 됩니다.

<div class="notching">notching</div>

로그인 후 복사

.notching {
    background: 
        linear-gradient(135deg, transparent 10px, #ff1493 0) top left,
        linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,
        linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,
        linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

로그인 후 복사

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

클립 경로를 사용하여 모서리 절단 그래픽을 구현합니다. of thegradient background 물론 이 기술에는 문제가 있습니다. 배경색을 그라데이션 색상으로 해야 하는 경우에는 이 방법이 어색합니다.

다행히도 클립 경로를 사용하여 모서리 모양을 잘라내는 또 다른 방법이 있습니다. 이러한 방식으로 배경색은 그라데이션이든 단색이든 관계없이 사용자 정의된 색상이 될 수 있습니다.

<div class="clip-notching">notching</div>

로그인 후 복사

.clip-notching {
    background: linear-gradient(
        45deg,
        #f9d9e7,
        #ff1493
    );
    clip-path: polygon(
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0 calc(100% - 15px),
        0 15px
    );
}

로그인 후 복사

간단하게 그라데이션 배경, 핵심은 클립 경로: 다각형()을 사용하여 그라데이션 직사각형 그래픽을 기반으로 원하는 모양(8면 모양)을 잘라내는 것입니다.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약 물론 위 코드는 매우 쉽습니다. 그라데이션과 클립 경로를 사용하여 쉽게 얻을 수 있는 다음 6면 모양을 생각해 보세요.

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

화살표 버튼다음은 양쪽에 있는 화살표 버튼을 주의 깊게 살펴보세요. 모서리를 충분히 잘라내면 화살표 모양이 됩니다.

이중 그라디언트를 사용하여 단일 화살표 버튼을 구현할 수 있습니다:

<div class="arrow">arrow</div>

로그인 후 복사

&.arrow {
    background: linear-gradient(
                -135deg,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100%
            )
            top right,
        linear-gradient(
                -45deg,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100%
            )
            bottom right;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

로그인 후 복사

화살표가 나옵니다:

CSS에서 자주 나타나는 이상한 버튼 스타일 요약 위쪽과 아래쪽 그라디언트 블록을 결합하여 얻습니다. 색상을 변경하면 즉시 이해할 수 있습니다.

이런 화살표 모양이라면? CSS에서 자주 나타나는 이상한 버튼 스타일 요약

一样的，它也是两个渐变的叠加，渐变的颜色是透明 --> 颜色A --> 颜色B --> 透明。当然，同样在这里也可以使用 clip-path：

这里给出 clip-path 的解法：

{
    background: linear-gradient(45deg, #04e6fb, #65ff9a);
    clip-path: polygon(
        0 0,
        30px 50%,
        0 100%,
        calc(100% - 30px) 100%,
        100% 50%,
        calc(100% - 30px) 0
    );
}

로그인 후 복사

内切圆角

下面这个按钮形状，多出现于优惠券，最常见的解法，也是使用渐变，当然，与切角不同，这里使用的径向渐变。

首先，看这样一个简单的例子：

<div></div>

로그인 후 복사

div {
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
}

로그인 후 복사

可以得到这样一个图形：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

所以，只需控制下 background-size，在 4 个角实现 4 个这样的图形即可：

<div class="inset-circle">inset-circle</div>

로그인 후 복사

&.inset-circle {
    background-size: 70% 70%;
    background-image: radial-gradient(
            circle at 100% 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 0 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 100% 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 0 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        );
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
}

로그인 후 복사

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

借助 mask 实现渐变的内切圆角按钮

如果背景色要求渐变怎么办呢？

假设我们有一张矩形背景图案，我们只需要使用 mask 实现一层遮罩，利用 mask 的特性，把 4 个角给遮住即可。

mask 的代码和上述的圆角切角代码非常类似，简单改造下即可得到渐变的内切圆角按钮：

<div class="mask-inset-circle">inset-circle</div>

로그인 후 복사

.mask-inset-circle {
    background: linear-gradient(45deg, #2179f5, #e91e63);
    mask: radial-gradient(
            circle at 100% 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 0 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 100% 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radial-gradient(
            circle at 0 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        );
    mask-repeat: no-repeat;
    mask-position: right bottom, left top, right top, left bottom;
    mask-size: 70% 70%;
}

로그인 후 복사

这样，我们就得到了这样一个图形：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

当然，读懂上述代码，你需要首先弄清楚 CSS mask 属性的原理。

圆角不规则矩形

下面这个按钮形状，也是最近被问到最多的，先来看看它的造型：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

不太好给它起名，一侧是规则的带圆角直角，另外一侧则是带圆角的斜边。

其实，它就是由圆角矩形 + 圆角平行四边形组成：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

所以，借助两个伪元素，可以轻松的实现它们：

<div class="skew">Skew</div>

로그인 후 복사

.skew {
    position: relative;
    width: 120px;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 10px;
        background: orange;
        transform: skewX(15deg);
    }
    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: -13px;
        width: 100px;
        height: 64px;
        border-radius: 10px;
        background: orange;
    }
}

로그인 후 복사

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

由于一个伪元素叠加在另外一个之上，所以对其中一个使用渐变，一个则是纯色，其颜色是可以完美衔接在一起的，这样就实现了渐变色的该图形：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

外圆角按钮

接下来这个按钮形状，常见于 Tab 页上，类似于 Chrome 的分页：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

我们对这个按钮形状拆解一下，这里其实是 3 块的叠加：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

只需要想清楚如何实现两侧的弧形三角即可。这里还是借助了渐变 -- 径向渐变，其实他是这样，如下图所示，我们只需要把黑色部分替换为透明即可，使用两个伪元素即可：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약

代码如下：

<div class="outside-circle">outside-circle</div>

로그인 후 복사

.outside-circle {
    position: relative;
    background: #e91e63;
    border-radius: 10px 10px 0 0;
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
    }
}

로그인 후 복사

即可得到：

CSS에서 자주 나타나는 이상한 버튼 스타일 요약