一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要怎么办呢?我们可以使用css3的transparent或者border-radius或者transform来实现。
css设置不规则div的方法示例:
1、设置圆形的div 代码展示:
.div1{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
text-align: center;
}
圆形
效果图:
般情况下我们可以通过border-radius来改变div的圆角弧度,设置的值可以是像素或者是百分比,但是两者也存在细微的差别。当设置的圆角弧度的像素值大于50px或者50%时,div就会变成圆形。
2、设置椭圆形的div 代码展示:
.div1{
width: 200px;
height: 100px;
background: red;
border-radius:100px/50px;
text-align: center;
}
椭圆形
效果图:
4、菱形 代码展示:
.div1{
width: 100px;
height: 100px;
background: red;
text-align: center;
transform: rotate(45deg);
margin:100px;
}
效果图:
transform中的rotate属性用于设置元素的旋转,rotate(45deg)表示将元素旋转45度。