Pure css pop up design

Question

How to create the pop up box as shown below in image with pure css

enter image description here

Here is what I have made with position:absolute which works fine but what I am trying to get is, is it possible to do only with one div by using :after or :before pseudo classes?

.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
}

Fiddle

@Bondye pls check the updated question. I had already tried this method — Sowmya
– Sowmya, Commented Apr 15, 2013 at 9:19

Artyom Neustroev · Accepted Answer · 2015-02-19 22:42:31Z

4

This one is not much flexible, but does thing without additional markup, using pseudo element ::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>

edited Feb 19, 2015 at 22:42

answered Apr 15, 2013 at 9:17

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slash197 · Accepted Answer · 2013-04-15 09:15:25Z

If I understood your question correctly this is what you need 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;
}

Mattias · Accepted Answer · 2013-04-15 09:20:35Z

0

First you need 2 divs, one for the "header" and one for the "content"

see my example http://jsfiddle.net/Cup5Y/13/

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

    </div>
</div>

answered Apr 15, 2013 at 9:20

Mattias

11 bronze badge

Collectives™ on Stack Overflow

Pure css pop up design

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related