Question

我希望我的svg图像位于我的块底部（位置：绝对，底部：0）。但在Internet Explorer中它不起作用（显示在中心）。我可以将宽度和高度设置为svg，它会以某种方式工作，但它会破坏另一个屏幕尺寸更小/更大的设备。我该如何解决这个问题？谢谢！这是代码codepen

.wrapper {
  padding: 150px 20px 50px;
  text-align: center;
  color: #fff;
}

.main {
  background-color: #000;
  line-height: 48px;
  position: relative;
}

svg {
  position: absolute;
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

<div class="main">
  <div class="wrapper">
    <div class="text">Some text here</div>
    <button>click</button>
  </div>
  <svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
    <polygon points="0,0 0,150 1300,150"></polygon>
    </svg>
  <svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
    <polygon points="1300,0 0,150 1300,150"></polygon>
    </svg>
</div>

Answer 1

如果您想要背景图片，为什么不使用background-image ??

＆＃13;

.wrapper {
  padding: 150px 20px 50px;
  text-align: center;
  color: #fff;
}
.main {
  background-color: #000;
  line-height: 48px;
  position: relative;
  background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 52 3" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 26,3 52,0 52,3 0,3" fill="#fff" /></svg>');
  background-repeat: no-repeat;
  background-position: center bottom;
}

＆＃13;

<div class="main">
  <div class="wrapper">
    <div class="text">Some text here</div>
    <button>click</button>
  </div>
</div>

＆＃13;

Answer 2

这可以仅使用CSS来完成。

我们可以在CSS中制作三角形。在主容器的底部粘一个三角形。会产生同样的效果。

.wrapper {
  padding: 110px 20px 50px;
  text-align: center;
  color: #fff;
}
.main {
  background-color: #000;
  line-height: 48px;
  position: relative;
  width: 1000px;
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  
  border-top: 50px solid #000;
  position:absolute; 
  bottom:-50px;
}
svg {
  position: absolute;
  bottom: 0;
}
.left {
  left:0;
}
.right {
  right:0;
}

<div class="main">
  <div class="wrapper">
    <div class="text">Some text here</div>
    <button>click</button>
  </div>
  <div class="arrow-down">
  </div>
</div>

Answer 3

使用简单的div或伪元素可以实现相同的效果。以下是我为展示这两种方法而创建的示例。

https://codepen.io/Nasir_T/pen/oEYYob

该示例使用position和border按照您的需要设置底部设计。如果要在其中放置图像，可以使用div解决方案;如果只想在底部的设计中显示箭头切割，则可以使用伪解决方案。

希望这有帮助。

IE中的底部0表示所有屏幕尺寸

3 个答案: