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

html-css018

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

思路给你:

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

背景颜色对上

然后z-index:-1

就可以让

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

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

css实现斜角原理:

把border进行旋转:

border: 2px solid #FFF

-webkit-transform: rotate(204deg)

预览效果页面:

http://each.sinaapp.com/game/index.html