在页面的顶部和底部创建成角度的三角形

Question

我正在尝试使用SVG创建对角线div，但遇到了很多问题。 我的目标是：

1. 在左上角创建全图。
2. 在右下角创建全角div文本。

我已经进行了处理，但是SVG div与地图重叠，因此我无法选择地图，并且如果我将地图的位置设置为高于SVG，而不是地图则覆盖了整个页面。

您可以在图像中看到我想要实现的外观。

Answer 1

我会使用clip-path来完成这项工作。 AFAIK是在没有JS和且没有假设的情况下唯一能够实现预期效果的想法，带有地图的矩形是正方形。 Support, unfortunately, isn't perfect。我还找到了interesting creator for clip paths。

More about clip-path

  

clip-path CSS属性创建一个裁剪区域，该区域定义应显示元素的哪一部分。更具体地说，显示了该区域内部的那些部分，而隐藏了外部的那些部分。

不幸的是，它不适用于IE，但是here you can find some fallback workarounds。

摘要

.container {
  position: relative;
  height: 250px;
  width: 250px;
  background: black;
}

.map {
  height: 100%;
  width: 100%;
  background: red;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
  clip-path: polygon(100% 0, 0% 100%, 0 0);
}

.corner {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: green;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

<div class="container">
  <div class="map"></div>
  <div class="corner"></div>
</div>