如何相对于三角形 div 对齐文本？答案

【问题标题】：How to align text relative to triangular div?如何相对于三角形 div 对齐文本？
【发布时间】：2015-06-29 18:52:54
【问题描述】：

我不确定这里是否有类似的堆栈溢出问题。

我的问题：

如果您看到上图，我的 (...) 在响应时未对齐，但我想将其保持在三角形的中间。

HTML：

<div class="arrow_box">
    <div class="container">
        <div class="row">
            <div class="Row14Text">
                <h2>
                    <strong>PHASE 1:</strong>
                </h2>
                <a href="#">...</a>
            </div>
        </div>
    </div>
</div>

我的 CSS 代码：

.arrow_box .container{
    width: 100%;
}

.arrow_box { 
    position: relative; 
    background: #616161; 
    width:100%;
    height:120px;
    cursor:pointer;
    color:#fff; 
    margin-bottom:5px;
}

.arrow_box:hover{
    background-color:red;
}

.arrow_box a,.arrow_box a:hover{
    color:#fff;
    background-color:transparent;
}

.arrow_box:nth-child(n+2):before{
    content:'';
    position: absolute;
    top: 00%;
    left: 52%;
    margin-left: -40px;
    border-top: solid 23px #fff;
    border-left: solid 26px transparent;
    border-right: solid 26px transparent;
    overflow:visible;
}

.arrow_box:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 52%;
    margin-left: -40px;
    border-top: solid 23px #616161;
    border-left: solid 26px transparent;
    border-right: solid 26px transparent;
    z-index:1000;
}

.arrow_box:hover:after {
    border-top: solid 23px #f00;
}

所以，朋友们，上面描述的是我的 css 和 html 代码。请帮我解决这个错位问题

此外，我想知道是对齐问题还是 css 问题。

我在这里使用 Bootstrap。

请朋友们，我不能对容器使用 width :100% ，我有一些限制。我的 arrow_box 的父容器 div：

enter code here

我不能使用 left 50% ，那它有一些布局问题。

【问题讨论】：

三角形好像没有居中
没有三角形居中，但三个点相对于 div 而不是三角形居中。
从您提供的图像来看，三角形看起来并不居中
黄教你好，请看我的代码。我再次编辑。
没有任何答案对你有用吗？

标签： html css twitter-bootstrap alignment

【解决方案1】：

您需要将伪元素正确居中。你的价值观有点偏离。

调整 CSS 属性

/*left: 52%;*/
left: 50%;
/*margin-left: -40px;*/
transform:translateX(-50%); /* unprefixed version */

JSfiddle Demo

【讨论】：

【解决方案2】：

更新以下属性。

.arrow_box:nth-child(n+2):before {
    left: 45%;
    //margin-left: 40px; /* Remove this */
}

.arrow_box:after{
    left: 45%;
    //margin-left: 40px; /* Remove this */
}

【讨论】：

【解决方案3】：

SOLUTION

<div class="container">
  
  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 1:</h2>
      <a href="#">...</a>
    </div>
  </div>
  
  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 2:</h2>
      <a href="#">...</a>
    </div>
  </div>  
  
  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 3:</h2>
      <a href="#">...</a>
    </div>
  </div>  
  
  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 4:</h2>
      <a href="#">...</a>
    </div>
  </div>

  <div class="arrow_box">
    <div class="inner">
      <h2>PHASE 5:</h2>
      <a href="#">...</a>
    </div>
  </div>      
  
</div>

.container{
  width: 100%;
}

.arrow_box { 
  position: relative; 
  background: #616161; 
  width:100%;
  height:120px;
  cursor:pointer;   
  margin-bottom:5px;
  text-align: center;
  padding-top: 20px;
}

.arrow_box * {
  color:#fff;
  font-family: sans-serif;
}

.arrow_box:hover {
  background-color:#919191;
}

.arrow_box:hover:after {
  border-top: solid 23px #919191;
}

.arrow_box a {
  text-decoration: none;
  font-size: 30px;
}

.arrow_box:after {
  content:'';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: solid 26px transparent;
  border-top: solid 23px #616161;
  z-index: 2;
}

.arrow_box:nth-child(n+2):before{
  content:'';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: solid 26px transparent;
  border-top: solid 24px #fff;
  overflow:visible;
  z-index: 1;
}

.arrow_box:last-child:after {
  display: none;
}

【讨论】：