この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、皆様のお役に立てれば幸いです。
CSS を使用して差し込みコーナー ボタンを実装する方法、および矢印付きのボタンを実装する方法は?
この記事では、デザイン案に頻繁に登場する、少し難しくトリッキーなボタンをCSSで実装するいくつかのボタンをベースに、可能な限りCSSを使って実装する方法を解説します。 [推奨される学習: css ビデオ チュートリアル ]
まず、よく表示されるボタンの形状を見てみましょう:
長方形角の丸いボタン
通常、私たちが目にするボタンは、長方形と角の丸い 2 種類だけです:
これらは非常にシンプルです。高さ、角の丸み、背景色。
<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 を使用すると、ラベル内のテキストも同様に変形されることに注意してください。そのため、ボタン内のテキストが影響を受けないように、通常は要素の擬似要素を使用してスタイルを実現します。
Parallelogram
Use 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);
}
台形
台形は平行四辺形よりも少し複雑で、遠近法に大きく依存します。 、ある程度の 3D 変換を使用します。原理は、次のように、X 軸を中心に回転する長方形です:
perspective と transform: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;
}
}
手抜き -- 単色背景とグラデーション背景
次のステップはコーナー グラフィックスです。 、最も一般的な方法は、主に gradientlinear-gradient を使用して実現されます。このようなグラフを見てください
<div></div>
.notching {
background: linear-gradient(135deg, transparent 10px, #ff1493 0);
background-repeat: no-repeat;
}
結果は次のとおりです。
これに基づいて、このような 4 つのグラフィックスを実現するには複数のグラデーションを使用するだけで済み、background-position を使用して 4 つの隅を見つけます:
<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 を使用して角の形状を切り取る別の方法があります。この方法では、背景色をグラデーションでも背景色でもカスタマイズできます。単色 それはすべて簡単です:
<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 デモ -- CSS さまざまなボタンの形状 | CSS さまざまな形状のボタン
https:/ /codepen.io/Chokcoco/pen/QWMoBGO?editors=1100
要約すると、
上記の実装に基づいて、いくつかの少し特殊なボタンを見つけるのは難しくありません。 , それはすべて、スプライシング、目隠し、マスキングなどによって実現されます。
そしてその中に:
- Gradient (線形勾配
linear-gradient、放射状勾配radial-gradient、複数の勾配) - マスク
マスク - クロップ
クリップパス - 変換
transform
は重要な役割を果たしており、これらを上手に使えば、これらのグラフィックを指先で扱うことができ、またそれを基にしたデフォルメにも冷静に向き合うことができます。
上記のグラフィックを filter:drop-shadow() と組み合わせると、基本的に不規則な影を実現できます。
さらに、より複雑なグラフィックスは次のとおりです:
画像をカットしましょう。CSS は優れていますが、実際の使用における投資を考慮する必要があります。出力比。
最後に
この記事の目的は簡単なマニュアルです。実際には、上記の効果を達成するためのより良い方法があるかもしれません。この記事では、それらを 1 つずつ列挙しません。修正は大歓迎です。
さて、この記事はここで終わります。この記事がお役に立てば幸いです:)
元のアドレス: https://segmentfault.com/a/1190000041044028
著者: chokcoco
(学習ビデオ共有: Web フロントエンド入門 )
以上がCSSを上手に使って色々な変わった形のボタンを実現（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AMJavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。
Node.js 19正式发布，聊聊它的 6 大特性！Nov 16, 2022 pm 08:34 PMNode 19已正式发布，下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性，希望对大家有所帮助！
实战：vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PMvscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。
聊聊如何选择一个最好的Node.js Docker镜像？Dec 13, 2022 pm 08:00 PM选择一个Node的Docker镜像看起来像是一件小事，但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢？
【6大类】实用的前端处理文件的工具库，快来收藏吧！Jul 15, 2022 pm 02:58 PM本篇文章给大家整理和分享几个前端文件处理相关的实用工具库，共分成6大类一一介绍给大家，希望对大家有所帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SublimeText3 中国語版
中国語版、とても使いやすい
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
メモ帳++7.3.1
使いやすく無料のコードエディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
