web-dev-qa-db-ja.com

CSS描画矢印のCSSドロップシャドウ

Divにカーソルを合わせたときに表示される矢印 ここ にも影を落としたいです。矢印はCSSから描画されます。

.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}

適用したいシャドウ設定は次のとおりです。

-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');

シャドウ設定を矢印に貼り付けるだけの問題は、シャドウがスパンボックス全体に適用され、矢印のドロップシャドウではなくボックスシャドウになることです。

P.S. htmlのスクリプトタグを最小化しようとしているので、できるだけ使用しないようにしたいと思います explorercanvas 。ただし、それが必要な場合は、コードを提供してください。

cssshadow
16
UrBestFriend

ボックスシャドウをcss境界三角形に適用することはできず、要素ボックス全体にのみ適用されます。

Cssボーダー三角形を正方形のdivに変更し、css3を使用して45度回転させてから、ボックスシャドウを適用することで、実行しようとしていることを実現できます。

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;

編集：更新

編集：css contentおよび:afterを使用した別のアプローチについては、以下のリンクを参照してください

http://css-tricks.com/triangle-with-shadow/

20
Blowsie

次の実装に私を導いた元の答えに対するBlowsieの功績。これが 動作中のjsfiddle実装 Chrome用です。関連するCSS：

/* Make an arrow */
.arrow{
    background-color: pink;
    box-shadow: 3px 3px 4px #000;
    width: 30px;
    height: 30px;

    /* Translate the box up by width / 2 then rotate */
    -webkit-transform: translateY(-15px) rotate(45deg);
}​

警告

ボックスの内容が矢印と重なっている場合は、錯覚が壊れています。矢印のz-indexをボックスの後ろに変更することでこれを回避しようとするかもしれませんが、これによりボックスのドロップシャドウが矢印の上にレンダリングされます。これが起こらないように、ボックスの内容に十分なパディングを追加します。

2
Error 454

私は他のブラウザをテストしていませんが、 CSS Arrow Please はちょっとしたトリックを使っていることに気づきました

親ボックスでこの構文を使用すると、生成された「矢印」にドロップシャドウも追加されます：

 -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));

しかし、この構文を使用すると、そうではありませんか？：

-webkit-box-shadow:  2px 3px 8px 0px rgba(0, 0, 0, 0.04);
2
ProVega

ドロップシャドウは、境界線の角の角度ではなく、要素ボックスにのみ適用されるのではないかと思います。ドロップシャドウ付きのこのような矢印が必要な場合は、画像にドロップシャドウを使用してPNG画像として作成する必要があります。

CSSは通常、正方形のボックスのみを生成します。ここでCSSを使用して先のとがった矢印を作成するための境界トリックは、巧妙なハックです。

1
Paul D. Waite

すべてのブラウザで機能する影付きの矢印を実現する別の方法は、Unicodeでhtml三角形文字を使用することです。

HTML：

 <span class="arrow">▶</span>

CSS：

.arrow {
  color: red;
  text-shadow: 0 0 20px black;
  transform: scaleY(1.4)
}

これは通常のテキストとしてレンダリングされるため、text-shadowプロパティを適用できます。矢印の寸法をカスタマイズするには（幅や高さを追加したり、矢印を歪めたりしたい）css3変換プロパティが重要です。ここにhtml文字のリファレンスがあります： http://www.copypastecharacter.com/graphic-shapes お楽しみください

0
Kaloyan Stamatov