0

我想知道，我是否有可能保持 margin:top 响应所有场景，即不同的设备，或者我是否使用鼠标重新调整浏览器的大小？

HTML：

<div class="main container">
  <div class="col-md-12 left-border">
    <div class="col-md-12 left">

    </div>
  </div>
  <div class="col-md-12 left-Triangle-border float-left trinagle-left-position">
    <div class=" col-md-12 left-Triangle">

    </div>
  </div>
</div>

CSS：

.main{
  width: 300px;
  height: 300px;
  background: black;
}
.float-left{float:left;}

.trinagle-left-position{margin-top: -56px;}

.left {
    width: 100%;
    height: 100%;
    background: #1e90ff;
-webkit-clip-path: polygon(2% 2%, 99% 2%, 99% 99%, 2% 62%);
clip-path: polygon(2% 2%, 99% 2%, 99% 99%, 2% 62%);
}
.left:hover{
   opacity:0.5;
}
.left-border {
    width: 99%;
    height: 49%;
  float: left;
    background: black;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
}

.left-Triangle-border {
    width: 100%;
    height: 100%;
    background: black;
    -webkit-clip-path: polygon(0 0, 0% 100%, 97% 27%);
clip-path: polygon(0 0, 0% 100%, 97% 27%);
}
.left-Triangle {
    width: 100%;
    height: 50%;
    background: #1e90ff;;
-webkit-clip-path: polygon(1% 1%, 0 99%, 95% 27%);
clip-path: polygon(1% 1%, 0 99%, 95% 27%);
}
.left-Triangle:hover{
   opacity:0.5;
}

html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

这是我的jsFiddle。我想要的是，在下面的图片中提到。

这是我正在尝试使用 css 剪辑路径多边形开发的两种形状。但是当我给填充绿色的 div 顶部边距并且我重新调整浏览器窗口的大小时，它不包含它的位置。

我发现的一种解决方案是使用媒体查询并根据媒体查询更改边距顶部。但在重新调整浏览器大小的情况下，它不起作用。

如果我可以使用引导程序使保证金最高响应，对此有什么想法吗？

4

0 回答 0