찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)

CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)

青灯夜游
青灯夜游앞으로
2022-07-19 11:28:062949검색

이번 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 모두에게 도움이 되길 바랍니다!

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;
}

사다리꼴과 평행사변형

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

이를 달성하려면 주로 transform을 사용할 수 있지만, transform을 사용한 후에는 라벨의 텍스트도 같은 방식으로 변형되므로 주의하시기 바랍니다. 일반적으로 요소 사용 의사 요소는 스타일을 구현하는 데 사용되므로 버튼 내의 텍스트는 영향을 받지 않습니다. transform 即可，但是要注意一点，使用了 transform 之后，标签内的文字也会同样的变形，所以，我们通常使用元素的伪元素去实现造型，这样可以做到不影响按钮内的文字。

平行四边形

使用 transform: skewX() 即可，注意上述说的，利用元素的伪元素实现平行四边形，做到不影响内部的文字。

<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);
    }
}

如果不想使用伪元素，除了 transform: skewX()，平行四边形使用渐变也是可以实现的。

大概就是这样：

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

梯形

梯形比平行四边形稍微复杂一点，它多借助了 perspective，其实是利用了一定的 3D 变换。原理就是一个矩形，绕着 X 轴旋转，像是这样：

使用  perspective 和 transform: 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;
    }
}

切角 -- 纯色背景与渐变色背景

接下来是切角图形，最常见的方法主要是借助渐变 linear-gradient 实现，来看这样一个图形

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

结果如下，

基于此，我们只需要利用多重渐变，实现 4 个这样的图形即可，并且，利用 background-position 定位到四个角：

<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;
}

利用 clip-path 实现渐变背景的切角图形

当然，这个技巧有个问题，当要求底色是渐变色的时候，这个方法就比较笨拙了。

好在，我们还有另外一种方式，借助 clip-path 切出一个切角图形，这样，背景色可以是任意定制的颜色，无论是渐变还是纯色都不在话下：

<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
    );
}

简单的实现一个渐变背景，接着核心就是，在渐变矩形图形的基础上，利用 clip-path: polygon() 切出我们想要的形状（一个 8 边形）：

当然，上述代码非常容易联想到下述这种 6 边形，使用渐变和 clip-path

평행사변형

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

<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;
}

의사 요소를 사용하지 않으려면 transform:skewX() 외에도 그래디언트를 사용하여 평행사변형을 구현할 수도 있습니다.

아마도 다음과 같습니다: 

{
    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
    );
}

사다리꼴

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

🎜perspective와 transform:rotateX()를 사용하세요. 물론 함께 작성할 수 있습니다: 🎜
<div></div>
div {
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
}
🎜🎜🎜코너 커팅--단색 배경 및 그라데이션 배경🎜🎜다음은 코너 그래픽입니다. 가장 일반적인 방법은 그라데이션 linear-gradient 구현을 사용하는 것입니다. , 이런 그래프를 보세요 🎜
<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;
}
🎜 결과는 다음과 같습니다 🎜🎜🎜🎜이를 바탕으로 4개의 그래픽을 구현하려면 여러 그라데이션을 사용하고 배경 위치를 사용하면 됩니다. > 네 모서리를 찾으세요: 🎜
<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%;
}
🎜🎜

클립 경로를 사용하여 그라데이션 배경의 모서리 그래픽 구현

🎜물론 이 기술에는 배경색이 다음과 같은 경우 문제가 있습니다. 그라디언트 색상이 필요하므로 이 방법은 서투릅니다. 🎜🎜다행히 clip-path를 사용하여 모서리가 잘린 그래픽을 잘라내는 또 다른 방법이 있습니다. 이러한 방식으로 배경색은 그라데이션이든 단색이든 관계없이 사용자 정의된 색상이 될 수 있습니다. 다음: 🎜
<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;
    }
}
🎜 간단히 그라데이션 배경을 구현한 다음, 핵심은 clip-path:polygon()을 사용하여 원하는 모양(8면 모양)을 잘라내는 것입니다. 🎜 🎜🎜🎜물론 위의 코드는 그래디언트와 clip-path를 사용하여 쉽게 얻을 수 있는 다음과 같은 6면 모양을 생각하기가 매우 쉽습니다. 🎜🎜🎜🎜🎜arrow 버튼 🎜🎜 다음은 화살표 버튼입니다. 위의 모서리 자르기 버튼을 잘 보시면 양쪽 모서리가 충분히 잘려지면 화살표 모양으로 변합니다. 🎜🎜단일 화살표 버튼을 구현하기 위해 이중 그라데이션을 사용할 수 있습니다: 🎜
<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);
    }
}
🎜화살표가 나옵니다: 🎜

它是由上下两个渐变块组合得到的，换个颜色立马就能明白：

那如果是这样一个箭头造型呢？

一样的，它也是两个渐变的叠加，渐变的颜色是透明 --> 颜色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);
}

可以得到这样一个图形：

所以，只需控制下 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;
}

借助 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 mask 属性的原理，如果你对它还有些陌生，可以看看我的这篇文章：

《奇妙的 CSS MASK》：https://github.com/chokcoco/iCSS/issues/80

圆角不规则矩形

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

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

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

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

<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;
    }
}

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

外圆角按钮

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

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

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

代码如下：

<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);
    }
}

即可得到：

여기에서 위의 모든 그래픽에 대한 전체 코드를 볼 수 있습니다. CodePen 데모 - CSS 다양한 모양 버튼

https://codepen.io/Chokcoco/pen/QWMoBGO?

요약하자면

위의 구현을 바탕으로 스플라이싱, 블라인딩, 마스킹 등을 통해 약간 특별한 버튼이 구현되는 것을 어렵지 않게 찾아볼 수 있습니다.

그 중:

  • Gradient(선형 그래디언트 linear-gradient, 방사형 그래디언트 radial-gradient, 다중 그래디언트)
    • linear-gradient、径向渐变 radial-gradient、多重渐变）
  • 遮罩 mask
  • 裁剪 clip-path
  • 变形 transform

发挥了重要的作用，熟练使用它们，我们对于这些图形就可以信手拈来，基于它们的变形也能从容面对。

上述的图形，再配合 filter: drop-shadow()Mask mask

Cropclip-path

Transformtransform

은 이를 사용하여 중요한 역할을 합니다. 능숙하게 우리는 이러한 그래픽을 손끝으로 처리할 수 있고, 이를 기반으로 한 변형에도 침착하게 직면할 수 있습니다.

위 그래픽을 filter: drop-shadow()와 결합하면 기본적으로 불규칙한 그림자를 얻을 수 있습니다.

더욱 복잡한 그래픽은 다음과 같습니다.

사진을 잘라내겠습니다. CSS도 좋지만 실제 사용에서는 입출력 비율을 고려해야 합니다.

마지막으로

이 글의 목적은 단순한 매뉴얼에 가깝습니다. 실제로는 위의 효과를 모두 달성할 수 있는 더 좋은 방법이 있을 수 있습니다. 추가 수정을 환영합니다.

자, 이 글이 끝났습니다. 이 글이 여러분에게 도움이 되었으면 좋겠습니다 :)

원본 주소: https://segmentfault.com/a/1190000041044028작성자: chokcoco

🎜🎜 (영상 공유 학습: 🎜 웹 프론트엔드 시작하기🎜)🎜

위 내용은 CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：콘텐츠 가시성 속성에 대해 자세히 알아보고 이를 사용하여 렌더링 성능을 최적화하는 방법에 대해 이야기합니다.다음 기사：콘텐츠 가시성 속성에 대해 자세히 알아보고 이를 사용하여 렌더링 성능을 최적화하는 방법에 대해 이야기합니다.

관련 기사

더보기