如何在 html 中绘制/获取它？ [关闭]

Question

我必须在我的网页中获得此功能，即在左侧梯形上会有一个谷歌地图，在右侧梯形上会有另一个背景，如何做到这一点， 请帮忙

Answer 1

您可以使用带有线性渐变的叠加层作为背景：DEMO

---

基本 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*/
}

Answer 2

只是给你一点提示，它应该可以帮助你得到你想要的。 试试这样的：

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

这是来自页面 http://css-tricks.com/examples/ShapesOfCSS/

Answer 3

你可以这样做：

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

和

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft { 
  width: 0; 
  height: 0; 
  border-top: 100px solid gray; 
  border-right: 100px solid transparent;
}

DEMO