html - 纯css弹出式设计

Question

如何使用纯 css 创建如下图所示的弹出框

这是我用 position:absolute 所做的，它工作得很好，但我想要得到的是，是否可以通过使用:after或:before伪类只使用一个 div？

.pop{
    background:#333;
    display:inline-block;
    width:250px;
    height:120px;
    border-radius:8px;
    position:relative;
    margin-top:25px
}
span{
    position:absolute; 
    left:0; 
    top:-20px;
    color:white;
    display:inline-block;
    border-radius:8px 8px 0 0;
    background:#333; 
    padding:6px;
    width:100px
}

小提琴

Answer 1

这个不是很灵活，但是没有额外的标记，使用伪元素::before。

.pop {
  background: #333;
  width: 250px;
  height: 120px;
  border-radius: 8px;
  display: inline-block;
}
.pop::before {
  content: "Pop up head";
  display: block;
  width: 90px;
  background: #333;
  border-radius: 8px;
  padding: 3px;
  margin-top: -14px;
  text-align: center;
  color: white;
}

<div class="pop"></div>

Answer 2

如果我正确理解了您的问题，这就是您需要的http://jsfiddle.net/slash197/Cup5Y/15/

HTML

<div class="holder">
    <div class="header">Header</div>
    <div class="pop">asd asd asd </div>
</div>

CSS

.holder {
    position: relative;
    width: 250px;
    height: 140px;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    background:#333;
    color: #ffffff;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    padding: 0px 10px;
}
.pop{
    position: absolute;
    top: 20px;
    left: 0px;
    background:#333;
    color: #ffffff;
    display:inline-block;
    width:250px;
    height:120px;
    padding: 10px;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

Answer 3

首先，您需要 2 个 div，一个用于“标题”，一个用于“内容”

看我的例子http://jsfiddle.net/Cup5Y/13/

<div class="pop">
    <div class="head">
        Title
    </div>
    <div class="content">

    </div>
</div>