使IMG响应的CSS三角形

Luis 发表于 Dev

路易斯

希望在图像上制作响应三角形，但它不会调整大小，并且根本无法对齐。如何解决？

        .image {
            width: 100%;
        }

        .image:after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #f5f5f5;
            position: absolute;
            left: 45%;
            top: 63%;
            transform: translatex(-50%);
            /** making it horizontally center **/
        }

<div class="image">
     <img src="img/frankie.png" class="img-fluid">
</div>

利夫尼·马尔卡（Livni Malka）

首先以引导位置添加position:relative到父级（在您的情况下.image）

第二个用途bootstrap-4 classes是w-100给.image/img

摆弄代码

.image:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #f5f5f5;
  position: absolute;
  left: 45%;
  top: 63%;
  transform: translatex(-50%);
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="image w-100 position-relative">
     <img src="https://i.stack.imgur.com/vdzwt.jpg" class="img-fluid  w-100">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。