How to align text relative to triangular div?

Question

I am not sure if there is similar problem explained here on stack overflow.

My Problem :

If you see above picture, My (...) are misaligned on responsive but i want to keep this in the middle of triangle.

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>

My CSS Code :

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

So, Friends, above described is my css and html code. Please help me to fix this misalignment issue

And Moreover, I would like to know either there is alignment issue or css issue.

I am using Bootstrap over here.

Please friends , I can't use width :100% to the container , I have some limitations. My parent container div of arrow_box :

enter code here

I can't use left 50% , it has some layout issue then.

Answer 1

You need to center the pseudo-elements properly. You values are a little off.

Adjusted CSS properties

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

JSfiddle Demo

Answer 2

Update following properties.

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

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

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