Javascript 如何在html中绘制/获取此文件？

我必须在我的网页上使用这个功能，即在左边的梯形图上会有一个谷歌地图，在右边的梯形图上会有另一个背景，如何做到这一点，

---

plz help

给你一点提示，这会帮助你得到想要的东西。 试着这样做：

#trapezoid {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

<div id="container">
    <div id="triangle-topleft"></div>
</div>

这是从页面上看的

---

您可以这样做：

#trapezoid {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

<div id="container">
    <div id="triangle-topleft"></div>
</div>

---

可以使用具有线性渐变的覆盖作为背景：

基本CSS：

#overlay {
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:linear-gradient(
    to bottom right,
    transparent 49.5%,
    rgba(255,0,0,0.5) 50%
    )
    ;
  pointer-events:none;/* avoid click being catched*/
}

---

我试着画一张画布，然后把它放进去，但是它覆盖了整页，我不想要！下一步该怎么办？@Sham-使用javascript将%转换为若干像素。每次我将100像素更改为%值时，为什么它会解压？因为它的三角形是由css制成的，请阅读此处以获得公平的想法。我已经试过了，但每次我尝试输入一些%值时，它都会解压为真，因为边框宽度不支持%值。但是你可以在页面加载时使用javascript在px中转换%。这真的很有帮助，谢谢。我可以更改左右两侧的背景。我需要两个背景颜色或图像？@sham，图像为bg，你可以这样做：