如何在css中将三角形移动到屏幕的右侧中心？答案

【问题标题】：How to move triangle over to the center right side of the screen in css?如何在css中将三角形移动到屏幕的右侧中心？
【发布时间】：2017-02-10 02:27:18
【问题描述】：

这可能是一个愚蠢的问题，但我在 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;
}

三角形位于屏幕的上角，标题正下方。我想把它移到屏幕的右侧和中间。我还想在左侧创建另一个三角形并做同样的事情。

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

【问题讨论】：

你想要它在右边和中间吗？
我想把它移到页面的右边，然后放到中间。

标签： html css button center

【解决方案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;，你可以调整它，让它适合你想要的:)

【讨论】：

嘿！我很抱歉没有说清楚。代码有效！我将页边距向下移动了大约 200 px 到页面的中心。我唯一的问题是左三角形不在左侧。

【解决方案2】：

jsfiddle

希望这篇文章有所帮助。 M 不确定你到底想要什么。

display: inline-block;

使用那个显示；

【讨论】：