如何設計CSS框如下圖

Question

使用CSS有沒有可能像下面的圖像一樣做？ 我不知道從哪裏開始。它是通過邊界屬性來實現的嗎？

Answer 1

有一些在線工具來生成這種東西，例如：

CSS Tooltip Generator

示例代碼（HTML）：

<div style='padding:50px'> 
    <a class="tooltips" href="#">CSS Tooltips 
    <span>Tooltip</span> 
    </a> 
</div> 

示例代碼（ CSS）：

a.tooltips { 
    position: relative; 
    display: inline; 
} 
a.tooltips span { 
    position: absolute; 
    width:140px; 
    color: #FFFFFF; 
    background: #000000; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    visibility: hidden; 
    border-radius: 6px; 
} 
a.tooltips span:after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -8px; 
    width: 0; height: 0; 
    border-top: 8px solid #000000; 
    border-right: 8px solid transparent; 
    border-left: 8px solid transparent; 
} 
a:hover.tooltips span { 
    visibility: visible; 
    opacity: 0.8; 
    bottom: 30px; 
    left: 50%; 
    margin-left: -76px; 
    z-index: 999; 
}