2

Facebook、Google、Twitter などで三角形の矢印の先端を持つこのタイプのボックスを見たことがあるかもしれません。幸いなことに、純粋な CSS で作成したものもあります。

コードは次のとおりです。

HTML :

<div class="box"><h3>This box contains a triangular arrow tip on top of it.</h3></div>

CSS :

.box { position: relative; background: #fff; color: #000; padding: 8px; border: 1px solid #ccc; }

.box:after {content: ""; position: absolute; display: block; width: 0; top: -15px; right: auto; bottom: auto; left: 5px; border-width: 0 10px 15px; border-style: solid; border-color: #fff transparent; }

三角形の先端が真っ白になっているのがわかります。また、CSS を調べると、先端の白い色が実際には境界線の色であることがわかります。

今私が探しているのは、三角形の先端の表面にある（たとえば灰色の）境界線または輪郭です。先端の色はフチに由来するので、二枚目のフチは無いので使えません。アウトラインを試してみましたが、うまくいかないようです。純粋なCSSでこれを行う方法はありますか?

4

4 に答える 4

5

:before疑似要素を使用して、最初の矢印の後ろに同様の矢印を配置します。

これはhttp://cssarrowplease.comで使用されている手法です。

あなたの例に基づいて実際に見てください。

.box:before {
    content:"";
    position: absolute;
    display: block;
    width: 0;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 3px;
    border-width: 0 12px 17px;
    border-style: solid;
    border-color: #ccc transparent;
    z-index: -1;
}
于 2013-03-05T16:15:52.670 に答える
3

境界線を使用して三角形を作成しないでください。CSS 変換を適用する疑似要素を使用するだけです。

デモ

結果：

結果

HTML :

<ul class='drop-down'>
  <li><a href='#'>Suggestions</a></li>
  <li><a href='#'>Friends (8)</a></li>
  <li><a href='#'>Friend Requests</a></li>
  <li><a href='#'>My Requests</a></li>
  <li><a href='#'>People I blocked</a></li>
</ul>

関連するCSS :

.drop-down {
  position: relative;
  border: solid 1px #ccc;
  background: white;
}
.drop-down:before {
  position: absolute;
  top: -.56em; left: 1em;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  width: 1em; height: 1em;
  transform: rotate(45deg);
  background: inherit;
  content: '';
}

/* variations */
.drop-down:first-child:before {
  transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
  border-right: solid 1px #ccc;
  border-left: none;
  transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}
于 2013-03-05T16:36:48.357 に答える
1

これは、UTF-8 の「上向き矢印」と少しの絶対位置とテキスト シャドウを使用して行うことができます。

コンテナ:

.boxArrow {
    margin-top:30px;
    height:100px;
    width:100px;    
    border:1px solid #000000;
    position:relative;
}

矢印:

.boxArrow:before {
    content: "\25B2";
    font-size:16px;
    color:#ffffff;
    position:absolute;
    top:-15px;
    left:30px;
    text-shadow: -1px 0 black, 0 1px white, 1px 0 black, 0 -1px black;
}
于 2013-03-05T16:15:50.630 に答える
0

シンプルで簡単かつ迅速な作業のために、jQuery UI を使用できます: http://jqueryui.com/tooltip/#custom-style

于 2013-10-31T04:24:33.520 に答える