將CSS三角形添加到小部件div

-1

我想在包含小部件標題的div背景上製作透明箭頭。將CSS三角形添加到小部件div

所需的輸出：

如果圖像不工作，你可以看到在這個網站的插件部分，它的標題：http://moneyrope.com/ - 有問題的部件有標題爲「最新理財技巧」 - （原諒混亂，不是一個完成的網站，只是一個測試/分期環境）。

CSS：

.latest-heading { 
 
    background: #53386f none repeat scroll 0 0; 
 
    color: #fff; 
 
    margin-bottom: 2%; 
 
    padding: 2%; 
 
    text-align: center; 
 
}

非常感謝你提前。

來源

2017-01-03 satrap

對不起，我做了搜索，並沒有發現你鏈接到一個。此外，該解決方案不適合我。 – satrap

您可以使用:after僞類添加此箭頭。

這裏是一個工作示例：

.latest-heading { 
 
    background: #53386f none repeat scroll 0 0; 
 
    color: #fff; 
 
    margin-bottom: 2%; 
 
    padding: 2%; 
 
    text-align: center; 
 
} 
 
.latest-heading:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #53386f; 
 
    content: ''; 
 
    position: absolute; 
 
    left: calc(50% - 20px); 
 
    top: 48px; 
 
}

<div class="latest-heading">1</div>

來源

2017-01-03 22:23:39 Dekel

謝謝Dekel的回答。不幸的是，它顯示在實際頁面中的元素上方。如果我把頂部：48px放在外面，那麼它會在它上面顯示幾個PX，理想狀態下，但我無法弄清楚如何在那裏找到它。 – satrap

您可以將'position：relative'添加到。最新的標題類 – Dekel

將CSS三角形添加到小部件div

回答

相關問題