html - 如何在不使用任何图像的情况下在 div 中设计以下效果

Question

我们如何在不使用任何图像的情况下像上面一样在底部设计提示。以下是我的跟踪代码：

<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 */
}

Answer 1

最小标记版本：

演示

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);
}

Answer 2

请参阅Pure css 关闭按钮（CSS 中的关闭按钮）和http://v2.desandro.com/resources/css-speech-bubble-icon/以了解实际轨迹。

Answer 3

您可以在 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 */
        }

演示

Answer 4

您可以使用before和after模拟接近您的箭头图像的形状。看看这个演示：http: //jsfiddle.net/j34um/3/