width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red}
.lxp {width: 30px
height: 30px
transform: rotateX(45deg)
}
.lx {
width: 20px
height: 20px
background: green
transform: rotate(45deg)
}
<div class="lxp">
<div class="lx"></div>
</div>
这才叫菱形好吧 具体什么形状调角度和长宽
用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>
