3

このボタンを CSS のみで再作成する方法を探しています。

ここに画像の説明を入力

私は三角形の手法について知っており、それに境界線を追加する方法も知っていますが、残念ながら、このボタンを再作成する方法はわかりません (追加のラッパーを追加したり、画像を使用したりせずに)。

このスタイルが必要なボタンは<input["submit"]>と 通常<a>の です。

4

2 に答える 2

4

要素が 1 つの場合は、リンクのグラデーションと歪んだ疑似要素を使用してそれを行うことができます。

デモ

(実際にはグラデーションのみを使用して実行できますが、矢印の形自体にホバーするとホバー アクションはトリガーされませんが、それを含む四角形の要素にホバーするとトリガーされます)

HTML :

<a class='boo' href='#'>click me</a>

関連するCSS :

.boo {
  display: inline-block;
  position: relative;
  padding: .5em 2em;
  background: 
    linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0, 
    linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
    linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
  background-repeat: no-repeat;
  background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
  position: absolute;
  right: -.2em;
  width: .5em; height: 50%;
  background: dodgerblue;
  content: '';
}
.boo:before {
  top: 0;
  transform: skewX(30deg);
}
.boo:after {
  bottom: 0;
  transform: skewX(-30deg);
}

編集：

背景が画像やグラデーションではなく単色である場合は、グラデーションを使用せずに、はるかに簡単な方法でそれを行うことができます (つまり、この 2 番目の方法には IE9 で動作するという利点もあります)。

デモ #2

.boo {
  display: inline-block;
  position: relative;
  padding: .5em 2em;
  background: lightblue;
}
.boo:before, .boo:after {
  position: absolute;
  right: -.3em;
  width: .5em; height: 50%;
  box-shadow: -.2em 0 0 white;
  background: inherit;
  content: '';
}
.boo:before {
  top: 0;
  transform: skewX(30deg);
}
.boo:after {
  bottom: 0;
  transform: skewX(-30deg);
}
于 2013-04-10T22:25:37.797 に答える
1

背景画像を使用する必要があります。矢印を含む透明な png を作成します。

2 つの要素が必要です。外側には背景画像が含まれ、内側にはテキストが含まれ、矢印と同じ背景色が含まれます。または、たとえばボタンが単色ではない場合など、背景色の代わりに 2 番目の背景画像を使用することもできます。

秘訣は、テキストを含むボックスを背景画像に揃えることです。

矢印の高さが 20 ピクセルの場合、内側のボックスは、たとえば 16 ピクセルと両側の 2 ピクセルのパディングになります (これをよりよく理解したい場合は、ボックス モデルを検索してください)。

外側の要素は、矢印イメージのおおよその幅に設定された右余白を持つことができます。

これが理にかなっていることを願っています。一般 的 な 技法 は襖と 呼 ば れ る。時間があれば記事全体を読むことをお勧めします。

于 2013-04-10T22:11:44.593 に答える