CSS3 如何实现菱形

html-css011

CSS3 如何实现菱形,第1张

可以画两个等腰三角形，等腰三角形代码#ID {

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>

这才叫菱形好吧 具体什么形状调角度和长宽