帶有箭頭和邊框的CSS工具提示

我正在嘗試使用帶有白色背景色和1px邊框的CSS工具提示。 如何有一個邊界，而不是普通的黑色箭頭？帶有箭頭和邊框的CSS工具提示

.up-arrow { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px solid #777777; 
 
    text-decoration: none; 
 
    border-radius: 2px; 
 
    padding: 20px; 
 
} 
 
.up-arrow:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 140px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid black; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

PS：即使它看起來好像是另一個問題，設計的細節是非常重要的。例如，最初有3個不同的答案（現在刪除了其中2個），在設計上略有不同。即使幾乎沒有什麼不同，他們的箭頭看起來不太完美，以至於當前的完美答案！魔鬼在細節！
目標是在這裏有一個普通的白色工具提示，1px寬的邊框。即使類似的看別人，也不是其他問題的重複（語音泡泡）。再次細節對於實現這種圓滑的外觀非常重要。

來源

2016-04-26 Basj

@ jbutler483：這是一個接近的問題，但顯然不是重複的。 – Basj

我的答案涵蓋了向這樣的工具提示添加邊框。如果您覺得您的問題不是，請編輯您的問題以清楚地說明差異。 – jbutler483

這是一個@Basj的騙局。結果是完全一樣的，你只是把箭頭放在不同的位置...... – Stewartside

其中一個解決方案是添加另一個僞元素:before，該元素略小於:after。這不是有史以來最好的解決方案，但它對於特定情況非常適用。

（您可能注意到，我也清理你的代碼一點點，取而代之:after與:before有適當的z-index兩個僞元素。讓我知道如果你需要進一步的說明）

.up-arrow { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px solid #777777; 
 
    text-decoration: none; 
 
    border-radius: 2px; 
 
    padding: 20px; 
 
    margin-top: 50px; 
 
} 
 
.up-arrow:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 140px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border: 10px solid transparent; 
 
    border-bottom-color: black; 
 
} 
 

 
.up-arrow:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 141px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border: 9px solid transparent; 
 
    border-bottom-color: white; 
 
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

來源

2016-04-26 17:57:16

這是一個完美的設計，謝謝！ – Basj

帶有箭頭和邊框的CSS工具提示

回答

相關問題