Question

我想知道，如果有可能我可以保留保证金：对所有情况都有最高响应，即不同的设备或者如果我使用鼠标重新调整浏览器大小？

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 clip-path polygon开发的两种形状。但是当我给div填充绿色并且重新调整浏览器窗口大小时，它不包含它的位置。

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

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

使用clip-path和bootstrap进行页首响应

0 个答案: