股利盒造型

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/