css如何设置不规则div?

一般在我们用html写出来的div都是方形的div,如果我们要写不规则的div要怎么办呢?我们可以使用css3的transparent或者border-radius或者transform来实现。

css设置不规则div的方法示例:

1、设置圆形的div 代码展示:

<style>
.div1{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    text-align: center;
}
</style>
</head>
<body>
    <div class="div1">圆形</div>
</body>

效果图:

1.jpg

般情况下我们可以通过border-radius来改变div的圆角弧度,设置的值可以是像素或者是百分比,但是两者也存在细微的差别。当设置的圆角弧度的像素值大于50px或者50%时,div就会变成圆形。

2、设置椭圆形的div 代码展示:

<style>
.div1{
    width: 200px;
    height: 100px;
    background: red;
    border-radius:100px/50px;
    text-align: center;
}
</style>
</head>
<body>
    <div class="div1">椭圆形</div>
</body>

效果图:

2.jpg

4、菱形 代码展示:

<style>
.div1{
    width: 100px;
    height: 100px;
    background: red;
    text-align: center;
    transform: rotate(45deg);
    margin:100px;
}
</style>
</head>
<body>
    <div class="div1"></div>
</body>

效果图:

3.jpg

transform中的rotate属性用于设置元素的旋转,rotate(45deg)表示将元素旋转45度。

以上就是css如何设置不规则div?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏