html - 如何在CSS中将三 Angular 形移到屏幕的中央右侧？

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

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

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

最佳答案

我不太确定将其居中（水平或垂直）是什么意思，但这是您可能会有所帮助的解决方案：）

.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;，您可以对其进行调整，使其适合您的需求:)

关于html - 如何在CSS中将三 Angular 形移到屏幕的中央右侧？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39809653/