1

cssで矢印付きのボックスを作成しようとしていますが、これまでの結果は次のとおりです: http://dabblet.com/gist/4079318

ご覧のとおり、グラデーションが矢印に正しく適用されておらず、矢印に追加のマークアップが使用されています。他の誰かがより良い解決策を持っていますか?

4

3 に答える 3

5

斜めのグラデーションで回転した疑似要素を使用します。

.fancy-arrow:after {
  content:"";
  display:block;
  width:25px;height:25px;
  background:#f00;
  position:absolute;
  right:-12px;top:5px;

  background: -webkit-linear-gradient(left top,  #7d7e7d 0%,#0e0e0e 100%); 
  -webkit-transform:rotate(45deg);
  z-index:-1;
}

デモンストレーション目的でのみ、webkit プレフィックスを使用します。同じことは、いくつかのフィルター マジックを使用して IE でも実現できます。

動作デモ

于 2012-11-15T16:04:08.397 に答える
2

CSS3 を必要としない別のソリューションを次に示しますが、これも単一色のボックス専用です: http://jsfiddle.net/T4A2Q/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#Box {
 width: 300px;
 height: 40px;
 background: #0094FF;
 border-color: #0094FF;
}

#Box:after {
 content: '';
 clear: both;
 float: right;
 margin-right: -20px;
 border-width: 10px;
 border-style: solid;
 border-bottom-color: transparent;
 border-left-color: inherit;
 border-top-color: inherit;
 border-right-color: transparent;
}

#Box:before {
 content: '';
 clear: both;
 float: right;
 margin-right: -20px;
 border-width: 10px;
 border-style: solid;
 border-bottom-color: inherit;
 border-left-color: inherit;
 border-top-color: transparent;
 border-right-color: transparent;
}

body {
 background: #FFF;
}

</style>
</head>

<body>

<div id="Box">

</div>

</body>
</html>
于 2012-11-15T16:19:19.620 に答える
0

テキストのグラデーションはまだ十分にサポートされていません。

あなたがしなければならないことは、既存の長方形を使用してから、角の上にいくつかの白いマスクを配置して矢印を形成することです.

于 2012-11-15T15:58:41.080 に答える