前端问题，如何实现图中的倾斜的边框效果？

html-css010

前端问题，如何实现图中的倾斜的边框效果？,第1张

思路给你：

弄两个方块，绝对定位，一左一右，左边倾斜45度，右边倾斜45度

背景颜色对上

然后z-index：-1

就可以让

“”链接详情还有右边的图片在上层“”

最外面的div加上overflow：hidden还有相对定位

有是有，CSS3的-moz-transform: rotate(deg)可实现文本旋转，但目前仅有极少的浏览器支持，并且也不完善，有的只能显示水平和垂直，不能倾斜。HTML5也许可以，但都是超前的技术了，你这种情况，用图片替换吧。文本可以用CSS移除屏幕。

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

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