6

グラデーションの背景を持つCSSで三角形を作成しようとしています。私はまだ成功したことがありません。下の画像に見られるこの効果を引き出すためにこれを行う方法はありますか. (間違ったパスワード エラー ボックスに付いている三角形。)

Photoshop でのデザイン ここに画像の説明を入力

これは、私がこれまでに HTML と CSS で作成したデザインです。

ここに画像の説明を入力

現時点で三角形用に持っているcssは次のとおりです。

.error-triangle {
    wwidth: 0;
    height: 0;
    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:  10px solid blue;
    margin-top: 64px;
    margin-left: 350px;
    position: fixed;
    -webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
       -moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
            box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
    background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:    -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:      -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:     -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:         linear-gradient(to top, #eb6767, #d94040 35%, #eb6767);
}

CSSのトリックに関するこのチュートリアルを使用していました。

4

3 に答える 3

17

CSS変換を使用すると、グラデーション（またはその他の種類の画像背景）を使用して三角形（または他の形状-五角形、六角形、八角形、十角形、十二角形、十四角形、八角形など）を作成するのは非常に簡単です。

ただし、この場合、三角形は必要ありません。正方形の疑似要素を45度回転し、その上に角から角へのグラデーションを適用する必要があります。

デモ

<div class='warn'></div>

CSS：

.warn {
  position: relative;
  margin: 0 auto;
  border: solid 1px darkred;
  width: 12em; height: 3em;
  border-radius: .2em;
  background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
  position: absolute;
  top: 50%; left: 0;
  margin: -.35em -.45em;
  border-left: inherit; border-bottom: inherit;
  /* pick width & height such that 
     the diagonal of the square is 1em = 1/3 the height of the warn bubble */
  width: .7em; height: .7em;
  border-radius: 0 0 0 .2em;
  transform: rotate(45deg);
  background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
  content: '';
}
于 2013-03-15T17:52:02.560 に答える
0

CSS 三角形は作成できますが、それ自体がグラデーションである CSS 三角形は作成できません。私が提案する唯一のトリックは、グラデーションの背景内の色に最も似ている色を選択することです. それは、グラデーションが実際にどれだけ大きいか、および三角形がどれだけうまく溶け込むかに依存します.

赤い div の場合、#d94040 という色を試してみることもできますが、境界線とドロップ シャドウがなくなります。ただし、これらは追加できます。CSS 三角形に境界線を追加するには、同じサイズの CSS 三角形でもある を内側に配置できます。Tこれは、それらをオーバーラップさせるために絶対位置と z-index を使用する必要があります。

または、::after または ::before を使用して、HTML コードを追加せずに CSS トライアングルを作成することもできますが、これは最新のブラウザーでのみ機能します。

于 2013-03-15T16:18:56.470 に答える
0

CSS3では「ボーダートリック」で三角形を作ることができます。この境界線には色を付けることができ、背景を持つことができます。

WebKit は (少なくとも Chrome 12 では) ボーダー画像としてグラデーションをサポートするようになりました。

よりサポートされている解決策として、魔女の :before 疑似要素の背景を「グラデーション」することをお勧めします。「背景グラデーション」+ (境界線のある css 三角形) トリックを適用します。

実験用の cssTriangle ジェネレーターを次に示します。

于 2013-03-15T16:38:45.713 に答える