Overlay Floating 1 Schritt links div mit einem anderen div

Question

Ich möchte das folgende auf breiten Bildschirmen erreichen, überlagern Sie das Dreieck div zum div nach rechts (contenido) hinter dem div mit Klasse "evento", habe ich mit Position versucht : absolute, sondern als Bootstrap-Spalten die Größe ich es nicht recht bekommen, (auf ganze Seite sehen sie bitte):

.triangulo_div{ 
 
      display: none; 
 
     } 
 
@media screen and (min-width: 768px) { 
 

 
.triangulo_div{ 
 
       display: block; 
 
       position: absolute; 
 
       left: 15vh; 
 
       top: 7.9vh; 
 
       z-index: 5; 
 
      } 
 
      .triangulo_rectangulo { 
 
       width: 0; 
 
       height: 0; 
 
       text-indent: -9999px; 
 
       border-top: 90vh solid #FE6A04; 
 
       border-right: 50px solid transparent; 
 
      } 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container" style="background-color: #001143; color: white"> 
 
    <div class="container-fluid"> 
 
<div class="row"> 
 
      <div class="col-sm-1 evento" style="background-color:#FE6A04;"> 
 
       BOX 
 
      </div> 
 
      <div id="triangulo_div" class="col-sm-2 triangulo_div"><p class="triangulo_rectangulo">triangulo rectangulo.</p></div> 
 
      <div class="col-sm-2" style="background-color:#06184A;"> 
 
       <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
 
        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. 
 
       </div> 
 
      </div> 
 
      <div id="contenido" class="col-sm-4 contenido" style="background-color:#4FCCE8;"> 
 
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
 
       rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. 
 
      </div> 
 
      <div class="col-sm-2 menu_siguiente" style="background-color:#06184A;"> 
 
       <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</div> 
 
      </div> 
 
     </div> 
 
</div> 
 
</div>

EDIT: .triangulo_div gelassen werden muss: ber (16,66666667% * -08) wenn geladen, aber ich möchte es behalten .evento beim Ändern der Größe

Answer 1

Ich habe es gelöst, left:-1.1em; statt left:calc(16.66666667% * -.08) zu lösen.

Sieht aus wie es eine einfache Sache

Answer 2

Hier ist eine Idee für Sie: https://codepen.io/panchroma/pen/owvyoz

Die wichtigen Bits in der CSS sind, dass ich die Positionierung des triangulo_div Element von der absoluten zur relativen geändert haben, und ich bin mit der linken als Prozentsatz

Offset berechnende

@media screen and (min-width: 768px) { 

.triangulo_div{ 
    display: block; 
    /*position:absolute; */ 
    position: relative; 
    /*left: 15vh; */ 
    left:calc(16.66666667% * 2); 
    /*top: 7.9vh; */ 
    z-index: 5; 
    } 
} 

Das HTML ist genau das, was Sie haben.

Der 16.66666667% -Wert ergibt sich aus der Breite des Bootstrap .col-sm-2, so dass er sich bei Änderung des Ansichtsfensters an breitere oder schmalere Spaltenbreiten anpasst.

Wenn Sie Polsterung hinzuzufügen oder andere Feinabstimmung es einfach genug sein würde, zum Beispiel

left:calc((16.66666667% * 2) + 15px); 

Ich hoffe, das Ihnen hilft, erhalten unstuck!