用css3 怎么制作菱形图片，图片是正的不旋转，新手求大神指点，最好把代码写出来，

html-css018

用css3 怎么制作菱形图片，图片是正的不旋转，新手求大神指点，最好把代码写出来，,第1张

思路: 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%}

用css实现:

<style>

    .diamond{

        display: inline-block

        width: 14px

        height: 14px

        border: 2px solid blue

        transform: rotate(45deg)

    }

</style>

<div class="diamond"></div>

用svg实现:

<svg viewBox="0 0 100 100" width="20" height="20">

    <polygon points="10 50, 50 10, 90 50, 50 90" fill="none" stroke="blue" stroke-width="10" />

</svg>

这是一个背景图片；

也可以用css写：中间一个矩形，左右两边各两个三角形，在定位。左三角可以这么写：

#triangle-left {

width: 0

height: 0

border-top: 50px solid transparent

border-right: 100px solid #ccc

border-bottom: 50px solid transparent

}