width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red}
思路: 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>
