我有以下的CSS和HTML做一個「三角」的div：按鈕
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}<div class="arrow-right">
<p>next</p>
</div>的問題是我想擁有內的文本（一個字） div（三角形的中心），但它打破了三角形放在旁邊。
實現這一目標的最簡單的方法是通過元件相對於定位到原來的位置
.arrow-right {
position: relative;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: relative;
left: -50px;
top: -25px;
}<div class="arrow-right">
<p>next</p>
</div>中完全取出，看起來像提供的示例中最居中的文本，謝謝 – user3550879
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
position:relative;
}
.arrow-right p{
position: absolute;
top: -24px;
left: -50px;
}<div class="arrow-right">
<p>next</p>
</div>你想讓這個輸出？
可以只將這個CSS在p標籤：
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
left: 20px;
position: absolute;
top: 40px;
}<div class="arrow-right">
<p>next</p>
</div>請嘗試以下代碼...
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: absolute;
left: 15px;
top: 40px;
}<div class="arrow-right">
<p> next </p>
</div>.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
position: relative;
left: -48px;
top: -26px;
}<div class="arrow-right">
<p>next</p>
</div>否則，你可以這樣做。將position:relative css規則添加到.arrow-right然後編寫'.arrow-right p'的css規則爲position:absolute;left: 15px;top: 40px;
問題是您的三角形div只有邊框。即它沒有自己的寬度和高度。因此你不能把數據放在裏面。 –
您將需要創建某種'position：absolute'解決方案，將文本從正常文檔流程 – Aides