1

divのデザインで矢印のようなことをするにはどうすればよいですか? 分周

4

3 に答える 3

2

境界線を使用して疑似要素として三角形を作成するのも 1 つの方法ですが、モックアップにはボックス シャドウが含まれています。ボックス シャドウを犠牲にしたくない場合 (ボーダー テクニックを使用すると、四角いシャドウが作成されて見栄えが悪くなるため)、方法があります。

絶対位置の正方形としてスタイル設定された2 つの疑似要素を作成し、それらを 45 度回転させます。そのうちの 1 つだけをデフォルト ( ) より低い重なり順序に設定z-index: -1し、その要素にボックス シャドウを適用します。

jsFiddle をチェックしてください

HTML:
<div class="container"></div>

CSS:

.container:before,
.container:after {
    content: '';
    width: 2em; height: 2em;
    position: absolute; top: -1em; left: 50%;
    margin-left: -.5em;
    background: green;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.container:before {
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
    z-index: -1;
}
于 2013-09-03T00:56:04.387 に答える
2

三角形を作りたい場合は、このようにします。配置はお任せします。

HTML

<div class="triangle"></div>

CSS

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 15px 9px;
border-color: transparent transparent #007bff transparent;
}

例として、三角形は青です。達成しようとしているもののために、明らかに白/透明にしたいと思うでしょう。

jsFiddle here

:afterポジショニングについては、 /:before疑似セレクターを使用することをお勧めします。

于 2013-09-02T22:01:20.447 に答える