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

希望这个有所帮助。我不确定你想要什么。

display: inline-block;

使用该显示;

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

2 个答案: