如何将三角形移动到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; 

使用该显示;