Как переместить треугольник в центр правой части экрана в 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

Надеюсь, что это поможет. М не уверен, чего ты хочешь.

display: inline-block; 

использование это дисплей;