Wie verschiebe ich das Dreieck in die Mitte der rechten Seite des Bildschirms in CSS?

Question

Dies kann eine dumme Frage, aber ich habe den folgenden Code in html:

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

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

und dieses in 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; 
} 

Das Dreieck in der oberen Ecke des Bildschirms sitzt, rechts unten die Überschrift. Ich möchte es auf die rechte Seite des Bildschirms und in die Mitte verschieben. Ich möchte auch ein weiteres Dreieck auf der linken Seite erstellen und das gleiche tun.

Mein Ziel ist es, zwei Dreiecksknöpfe zu erstellen. Kann mir jemand dabei helfen?

Answer 1

Ich bin nicht ganz sicher, was Sie haben es Mitte bedeuten, wie horizontal oder vertikal, aber hier ist eine Lösung, die Ihnen nützlich sein könnten :)

.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> 
 

Bei der i Moment habe die gerade eingestellt margin-top: 100px; Sie können es einfach anpassen, so passt es, was Sie wollen :)

Answer 2

jsfiddle

Ich hoffe, dieser hilft. M nicht sicher, was Sie genau wollen.

display: inline-block; 

Verwenden Sie diese Anzeige;