如何將三角形移動到CSS中的屏幕右側？

Question

這可能是一個愚蠢的問題，但我在HTML中下面的代碼：

<h1 class="page-title"> 
    Paintings 
    </h1> 
    <hr> 
    </header> 

    <div class="arrow1"> 
    <div class="triangle-right"> 
    </div> 
    </div> 

，這在CSS：

.page-title { 


font-size: 75px; 
    text-align: center; 
    font-weight: 100; 
    font-family: 'Quicksand', sans-serif; 
    margin: 0 auto; 
} 

.triangle-right { 
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent; 
    border-left: 40px solid red; 
    border-bottom: 30px solid transparent; 
} 

三角形坐落在屏幕的右上角，右下方標題。我想將它移到屏幕右側和中間。我也想在左側創建另一個三角形並執行相同的操作。

我的目標是創建兩個三角形按鈕。有人可以幫我實現這個目標嗎？

Answer 1

我不太清楚你的意思是使其中心，像水平或垂直的，但這裏要說的是，你可能會發現有用的:)

.page-title { 
 

 

 
font-size: 75px; 
 
    text-align: center; 
 
    font-weight: 100; 
 
    font-family: 'Quicksand', sans-serif; 
 
    margin: 0 auto; 
 
} 
 

 
.triangle-right { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 30px solid transparent; 
 
    border-left: 40px solid red; 
 
    border-bottom: 30px solid transparent; 
 
    float: right; 
 
} 
 

 
.triangle-left { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 30px solid transparent; 
 
    border-right: 40px solid red; 
 
    border-bottom: 30px solid transparent; 
 
float: left; 
 
} 
 

 
.arrow1 { 
 
    margin-top: 100px; 
 
}

<h1 class="page-title">Paintings</h1> 
 

 
<hr> 
 

 
<div class="arrow1"> 
 
    <div class="triangle-left"></div> 
 
    <div class="triangle-right"></div> 
 
</div> 
 

在一個解決方案那一刻我剛剛設置的margin-top: 100px;你可以調整，以便它適合你想要什麼:)

Answer 2

jsfiddle

希望這個幫助。 M不知道你想要什麼。

display: inline-block; 

使用該顯示;