This article will show you how to use CSS to easily realize various strange-shaped buttons that appear frequently. I hope it will be helpful to everyone!

How to use CSS to implement an inset corner button, and how to implement a button with an arrow?

This article is based on some buttons that appear frequently in design drafts and use CSS to implement slightly difficult and tricky buttons, and explains how to use CSS to implement them as much as possible. [Recommended learning: css video tutorial]

Let us first take a look at these button shapes that often appear:

Rectangle And rounded corner buttons

Normally speaking, there are only two types of buttons we encounter-rectangular and rounded corners:

They are very simple. Width, height, rounded corners and background color.

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

Trapezoid and Parallelogram

Next, based on the deformation of the rectangle, the Trapezoid and Parallelogram buttons will often appear.

To achieve them, you can mainly use transform, but please note that after using transform, the text in the label will also be deformed in the same way, so we usually Use pseudo-elements of elements to achieve styling, so that the text within the button is not affected.

Parallelogram

Use transform: skewX(). Pay attention to the above and use the pseudo-element of the element to implement the parallelogram without affecting the internal text. .

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

If you don’t want to use pseudo-elements, in addition to transform: skewX(), parallelograms can also be implemented using gradients.

It's probably like this:

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

Trapezoid

The trapezoid is a little more complicated than the parallelogram. It relies more on perspective. In fact, it uses a certain amount of 3D transformation. The principle is a rectangle rotating around the X axis, like this:

Use perspective and transform: rotateX() That’s it, of course, they can be written together:

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

Cut corners--solid color background and gradient background

The next step is the corner graphics , the most common method is mainly achieved with the help of gradientlinear-gradient, look at such a graph

<div></div>

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

The result is as follows,

Based on this, we only need to use multiple gradients to achieve 4 such graphics, and use background-position to locate the four corners:

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

Use clip-path to realize the corner graphics of the gradient background

Of course, there is a problem with this technique. When the background color is required to be a gradient color, this method is more clumsy.

Fortunately, we have another way to use clip-path to cut out a corner shape. In this way, the background color can be any customized color, whether it is a gradient or a solid color It’s all a piece of cake:

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

Simply implement a gradient background, and then the core is to use clip-path: polygon() to cut out what we want based on the gradient rectangular graphic The shape (an 8-sided polygon):

Of course, the above code is very easy to think of the following 6-sided polygon, using gradients and clip-path can be easily obtained:

Arrow button

The next is the arrow button, carefully observe the corner cut button above, when the corners on both sides are cut When it drops enough, it becomes an arrow shape.

We can use double gradients to implement a single arrow button:

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

An arrow comes out:

它是由上下兩個漸變塊組合得到的，換個顏色立馬就能明白：

那如果是這樣一個箭頭造型呢？

一樣的，它也是兩個漸變的疊加，漸變的顏色是透明 --> 顏色A --> 顏色B --> 透明。當(dāng)然，同樣在這里也可以使用 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
????);
}

內(nèi)切圓角

下面這個按鈕形狀，多出現(xiàn)于優(yōu)惠券，最常見的解法，也是使用漸變，當(dāng)然，與切角不同，這里使用的徑向漸變。

首先，看這樣一個簡單的例子：

<div></div>

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

可以得到這樣一個圖形：

所以，只需控制下 background-size，在 4 個角實現(xiàn) 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 實現(xiàn)漸變的內(nèi)切圓角按鈕

如果背景色要求漸變怎么辦呢？

假設(shè)我們有一張矩形背景圖案，我們只需要使用 mask 實現(xiàn)一層遮罩，利用 mask 的特性，把 4 個角給遮住即可。

mask 的代碼和上述的圓角切角代碼非常類似，簡單改造下即可得到漸變的內(nèi)切圓角按鈕：

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

這樣，我們就得到了這樣一個圖形：

當(dāng)然，讀懂上述代碼，你需要首先弄清楚 CSS mask 屬性的原理，如果你對它還有些陌生，可以看看我的這篇文章：

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

圓角不規(guī)則矩形

下面這個按鈕形狀，也是最近被問到最多的，先來看看它的造型：

不太好給它起名，一側(cè)是規(guī)則的帶圓角直角，另外一側(cè)則是帶圓角的斜邊。

其實，它就是由圓角矩形 + 圓角平行四邊形組成：

所以，借助兩個偽元素，可以輕松的實現(xiàn)它們：

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

由于一個偽元素疊加在另外一個之上，所以對其中一個使用漸變，一個則是純色，其顏色是可以完美銜接在一起的，這樣就實現(xiàn)了漸變色的該圖形：

外圓角按鈕

接下來這個按鈕形狀，常見于 Tab 頁上，類似于 Chrome 的分頁：

我們對這個按鈕形狀拆解一下，這里其實是 3 塊的疊加：

只需要想清楚如何實現(xiàn)兩側(cè)的弧形三角即可。這里還是借助了漸變 -- 徑向漸變，其實他是這樣，如下圖所示，我們只需要把黑色部分替換為透明即可，使用兩個偽元素即可：

代碼如下：

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

即可得到：

You can see the complete code for all the above graphics here: CodePen Demo -- CSS Various Button Shapes | CSS Various Shape Buttons

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

To summarize

Based on the above implementation, it is not difficult for us to find that some slightly special buttons, It is all achieved through splicing, blindfolding, masking, etc.

And among them:

• Gradient (linear gradientlinear-gradient, radial gradientradial-gradient, multiple gradient)
• Maskmask
• Cropclip-path
• Transformtransform

plays an important role. If we use them skillfully, we can handle these graphics at our fingertips, and we can also face the deformations based on them calmly.

The above graphics, combined with filter: drop-shadow(), can basically achieve irregular shadows.

Furthermore, more complex graphics are as follows:

Let’s cut the picture. Although CSS is good, you need to consider the investment in actual use. output ratio.

Finally

The purpose of this article is more of a simple manual. In practice, there may be better ways to achieve the above effects. This article does not enumerate them one by one. Additional corrections are welcome. .

Okay, this article ends here, I hope this article will be helpful to you:)

Original address: https://segmentfault.com/a/1190000041044028

Author: chokcoco

(Learning video sharing: Getting started with web front-end)

The above is the detailed content of Use CSS skillfully to realize various strange-shaped buttons (with code). For more information, please follow other related articles on the PHP Chinese website!