如何将三角形移动到CSS中的屏幕右侧？

这可能是一个愚蠢的问题，但我在HTML中下面的代码：如何将三角形移动到CSS中的屏幕右侧？

<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; 
}

三角形坐落在屏幕的右上角，右下方标题。我想将它移到屏幕右侧和中间。我也想在左侧创建另一个三角形并执行相同的操作。

我的目标是创建两个三角形按钮。有人可以帮我实现这个目标吗？

来源

2016-10-01 Lubidia13

你想要它在右侧和中心？ – RasmusGlenvig

我希望它移动到页面的右侧，然后放到中间。 – Lubidia13

我不太清楚你的意思是使其中心，像水平或垂直的，但这里要说的是，你可能会发现有用的:)

.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;你可以调整，以便它适合你想要什么:)

来源

2016-10-01 17:51:22 RasmusGlenvig

嘿！我很抱歉不清楚。代码有效！我将边距降低了大约200像素，使其位于页面的中心。我唯一的问题是左边的三角不在左边。 – Lubidia13

jsfiddle

希望这个帮助。 M不知道你想要什么。

display: inline-block;

使用该显示;

来源

2016-10-01 17:53:22 THCoder

如何将三角形移动到CSS中的屏幕右侧？

回答

相关问题