搜尋
首頁web前端css教學巧用CSS實現各種奇形怪狀按鈕(附代碼)
巧用CSS實現各種奇形怪狀按鈕(附代碼)Jul 19, 2022 am 11:28 AM
cssjavascriptcss3前端

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼)

怎麼樣用 CSS 實作一個內切角按鈕呢、怎麼樣實作一個箭頭的按鈕呢?

本文是基於一些高頻出現在設計稿中的,使用 CSS 實現稍微有點難度和技巧性的按鈕,講解使用 CSS 如何盡可能的實現它們。 【推薦學習:css影片教學

先讓我們來看看這些常會出現的按鈕形狀:

矩形與圓角按鈕

正常而言,我們遇到的按鈕就這兩種-- 矩形和圓角:

它們非常的簡單,寬高和圓角和背景色。

    <div>rect</div>
    <div>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: skewX() 即可,注意上述說的,利用元素的偽元素實現平行四邊形,做到不影響內部的文字。

<div>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 軸旋轉,像是這樣:

使用 perspectivetransform: rotateX()即可,當然,它們可以合在一起寫:

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

一個箭頭就出來了:

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

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

一样的,它也是两个渐变的叠加,渐变的颜色是透明 --> 颜色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>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>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>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>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 Demo -- CSS Various Button Shapes | CSS 各種造型按鈕

https://codepen.io/Chokcoco/pen/QWMoBGO?editors=1100

總結一下

基於上述的實現,我們不難發現,一些稍微特殊的按鈕,無非都透過拼接、障眼法、遮罩等方式實現。

而其中:

  • 漸層(線性漸層linear-gradient、徑向漸層radial-gradient、多重漸層)
  • 遮罩mask
  • 裁切clip-path
  • 變形transform

發揮了重要的作用,熟練使用它們,我們對於這些圖形就可以信手拈來,基於它們的變形也能從容面對。

上述的圖形,再配合 filter: drop-shadow(),基本上都能實現不規則陰影。

再者,更為複雜的圖形,如下所示:

#還是切圖吧,CSS 雖好,實際使用中也需要考慮投入產出比。

最後

本文的目的更多的是當一個簡單的手冊,實際中實現上述的效果可能有更好的方法,本文沒有一一枚舉,也歡迎補充指正。

好了,這篇文章到此結束,希望這篇文章對你有幫助:)

原文網址:https://segmentfault.com/a/1190000041044028

作者:chokcoco

(學習影片分享:web前端入門

以上是巧用CSS實現各種奇形怪狀按鈕(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中