0

ここに画像の説明を入力

画像を使用せずに、上記のように下部に先端を設計するにはどうすればよいでしょうか。以下は私のトレイルコードです：

<div id="coverImageToolTip"><p><font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE
    <div id="tail1"></div>
    <div id="tail2"></div>

#coverImageToolTip {
    position: absolute;
    z-index: 10;
    padding: 0px 4px;
    background-color: gray;
    bottom: 100px;
    left: 20%;
    border-radius: 10px;
    font-weight: bold;
    border-bottom: 5px solid black;
}


/* #tail1 {
    position:absolute;
    bottom:100px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
} */

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color: red transparent transparent  red  ;
    border-width:10px;
    border-style:solid;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}
4

4 に答える 4

3

最小限のマークアップ バージョン:

デモ

HTML :

<div class='tooltip'>
  <span class='highlight'>tip:</span> upload your cover image here
<div>

関連するCSS :

.tooltip {
  position: relative;
  margin: 1em auto;
  padding: .5em .2em;
  width: 10.5em; height: 3em;
  border-radius: .25em;
  box-shadow: 0 .2em 0 black;
  background: #999;
  font: 700 1.6em/1.5 sans-serif;
}
.tooltip:before {
  position: absolute;
  top: -.75em; right: -.75em;
  border: solid .2em;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: black;
  color: #999;
  font: 900 .65em/1.5 sans-serif;
  content: 'x';
}
.tooltip:after {
  position: absolute;
  z-index: -1;
  right: 25%; bottom: -.75em;
  width: 2em; height: 2em;
  box-shadow: 0 .35em 0 black;
  transform: rotate(30deg) skewY(-60deg);
  background: inherit;
  content: '';
}
.highlight:after, .highlight:before {
  position: absolute;
  top: 100%; right: 31.025%;
  width: 1.725em; height: .2em;
  transform: skewX(-30deg);
  background: #999;
  content: '';
}
.highlight:after {
  right: 30.65%;
  transform: skewX(-60deg);
}
于 2013-02-28T12:38:35.043 に答える
0

を使用beforeしafterて、矢印の画像に近い形状をシミュレートできます。このデモをご覧ください：http：//jsfiddle.net/j34um/3/

于 2013-02-28T11:24:11.373 に答える
0

実際のトレイルについては、純粋な css の閉じるボタン(CSS の閉じるボタン) とhttp://v2.desandro.com/resources/css-speech-bubble-icon/を参照してください。

于 2013-02-28T10:51:38.637 に答える
0

cssで閉じるボタンと矢印を実行できますが、矢印の影はできません。

以下のコードを見てください

HTML

    <div id="coverImageToolTip">
    <div class="close"><a href="#">X</a></div>
    <p>
    <font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE
    </p>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

      .close a{
    position:absolute;
    right:-5px; top:-8px;
    display:inline-block;
    background:black;
    padding:2px 6px;
    color:white;
    border:solid grey 3px;
    border-radius:22px;
    font-size:12px; 
    text-decoration:none
}
        #tail2 {
            position:absolute;
            bottom:-19px;
            left:80px;
            width:0;height:0;
            border-color: grey transparent transparent  grey  ;
            border-width:10px;
            border-style:solid;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(1deg); /* Safari and Chrome */
            -o-transform:rotate(90deg); /* Opera */
        }

デモ

于 2013-02-28T10:57:40.927 に答える