将浮动 1 步左 div 与另一个 div 重叠

Question

我想在宽屏幕上实现以下目标，将三角形 div 覆盖到 div 后面的右侧（contenido）div，类为“evento”，我尝试使用 position: absolute，但作为引导调整列大小我不好看，（请看整页）：

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

编辑：加载时必须保留 .triangulo_div：calc(16.66666667% * -.08)，但我想在调整大小时将其保留在 .evento 后面

Answer 1

这里有一个想法给你：https://codepen.io/panchroma/pen/owvyoz

CSS 中的重要部分是我已将 triangulo_div 元素的位置从绝对更改为相对，并且我将左侧偏移量计算为百分比

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

HTML 正是您所拥有的。

16.66666667% 的值来自引导程序 .col-sm-2 的宽度，因此它会随着视口的变化而适应更宽或更窄的列宽。

如果您需要添加填充或其他微调，这很容易，例如

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

我希望这能帮助你摆脱困境！

Answer 2

我设法使用left:-1.1em; 解决了它 而不是left:calc(16.66666667% * -.08)。

看起来很简单