用div加css怎么做出这种菱形框架??或者其他方法??

html-css023

用div加css怎么做出这种菱形框架??或者其他方法??,第1张

<div

style=“height:300pxwidth:200pxborder:solide

1px

blue”></div>

关键是你的div要有一定的宽高。另外边框的颜色不要和背景色一样，这样也会看不出来

思路: div旋转45度 img旋转-45度

html:<div class="lx"><img src="img/replace_me.jpg" alt=""></div>

css:

.lx{transform:rotate(45deg)width:400pxheight:400pxoverflow:hiddenvertical-align: middletext-align: centermargin:100px autodisplay:flex}

.lx img{transform:rotate(-45deg)max-width:100%max-height:100%}