Div box style

Question

Я играл с css вокруг div для когда-то сейчас и до сих пор не смог найти способ скопировать рисунок ниже.

Любое может помочь было бы здорово. И это должно быть div или что-то, что я могу разместить внутри.

Answer 1

Я думаю, что CssArrowPlease - это то, что вы ищете.

Answer 2

Немного сложный, но выполнимый с чистым CSS.

HTML:

<span class="hover-me">Mouse goes here</span> 
<div class="tooltip"> 
    <div class="tooltip-origin-border"> 
     <div class="tooltip-origin-inner"> 
     </div> 
    </div> 
    <div class="tooltip-content"> 
     This is a tooltip. 
    </div> 
</div> 

CSS:

.tooltip { 
    position: absolute; 
    margin-top: -30px; 
    margin-left: 120px; 
    display: none; 
} 
.tooltip-content { 
    padding: 10px; 
    border-radius: 5px; 
    border: 1px solid #33c; 
    background: #ddf; 
} 
.tooltip-origin-border { 
    border: 10px solid transparent; 
    border-right-color: #33c; 
    margin-top: 10px; 
    margin-left: -19px; 
    position: absolute; 
} 

.tooltip-origin-inner { 
    border: 8px solid transparent; 
    border-right-color: #ddf; 
    margin-top: -8px; 
    margin-left: -6px; 
    position: absolute; 
} 
.hover-me { 
    cursor: pointer; 
} 
.hover-me:hover + .tooltip { 
    display: block; 
} 

Вам просто нужно играть с позиции. «Стрелка» на самом деле представляет собой коробку с прозрачными левыми, верхними и нижними границами, оставляя только одну правую видимую и из-за того, как они соединяются друг с другом, есть форма треугольника. Jsfiddle

Answer 3

Попробуйте ->http://jsfiddle.net/5amvG/

Я надеюсь, что это то, что вы ищете

CSS:

#popup{ 
    overflow: visible; 
    position: relative; 
    border: 0; 
    padding: 40px; 
    height: 40px; 
    width: 110px; 
    color: #fff; 
    background: #d83c3c; 
    border-radius: 0 3px 3px 0;  
} 
#popup:before{ 
    content: ''; 
    position: absolute; 
    border-width: 8px 8px 8px 0; 
    border-style: solid solid solid none; 
    border-color: transparent #d83c3c transparent; 
    top: 12px; 
    left: -6px; 
} 

HTML:

<div id="popup"> 
    Sell yourself and say what makes you,you ! 
</div> 

Answer 4

Я думаю, что это может помочь вам:

Чистый CSS речи пузыри: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/