css,用一张大图做页面背景，同时在背景图片大概在水平方向中部抠出一个小矩形，这个矩形是用来做链接

html-css028

css,用一张大图做页面背景，同时在背景图片大概在水平方向中部抠出一个小矩形，这个矩形是用来做链接,第1张

背景图片居中，如果你指的是body的背景，那么背景图片的css为center就行了。然后再看你的小矩形的位置，假设你的页面只有这么一个元素，那么直接设定这个小矩形的宽度，然后css为margin:0 auto如果上边还有边距，你可以自己调整数值。如果页面除了小矩形还有其他的元素，具体情况具体分析，要看你的具体布局啦。其实这个背景图片和这个小矩形不会相互影响的吧。

首先说明一点：目前为止任何利用css来实现不规则边框的方法都是具有很严重的浏览器兼容性的（幸运的是微信小程序是支持的，哈哈），如果你想研究，请搜 css3 clip-path polygon

最兼容也是最简单的方法是直接用一张大图就解决了，最多就是切割一下，只要最终能够拼成一张大图即可。

#trapezoid {

border-bottom: 100px solid red

border-left: 50px solid transparent

border-right: 50px solid transparent

height: 0

width: 100px

}

请~~