如何实现不规则的Div外部形状？

最新推荐文章于 2024-03-09 12:04:17 发布

xiao姝姝

最新推荐文章于 2024-03-09 12:04:17 发布

阅读量1.2w

点赞数 12

分类专栏： css 文章标签： div不规则 div形状不规则轮廓

本文链接：https://blog.csdn.net/qq_42988963/article/details/82354221

版权

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

如何实现不规则的Div外部形状？
一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。
1、设置圆形的div 代码展示：

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

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

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

注：需要将宽度设置为高度的两倍，圆角弧度设置方式也要有相对的变化，100px/50px表示的是分别设置水平方向的弧度和竖直方向的弧度值。
3、三角形代码展示：

<style>
.div1{
    width: 0px;
    height: 0px;
    text-align: center;
    border-top: 100px solid transparent;
    border-bottom: 100px solid pink;
    border-right:100px solid transparent;
    border-left:100px solid transparent;
}
.div2{
    width: 0px;
    height: 0px;
    text-align: center;
    border-top: 100px solid skyblue;
    border-bottom: 100px solid pink;
    border-right:100px solid lightgreen;
    border-left:100px solid yellow;
    margin-top: 20px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
    <div class="div1">三角形</div>
    <div class="div2"></div>
</body>

注：在设置的时候我们需要将div的高度和宽度设置为0；用border来将div撑起来，div2展示的就是border撑起来之后的div的样式。当我们设置好div的border之后，将某些border设置为transparent（透明），但是border的值不为0哦，这样就可以设置出一个三角形来了，如div1。
4、菱形代码展示：

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

注：transform中的rotate属性用于设置元素的旋转，rotate(45deg)表示将元素旋转45度。
5、设置梯形代码展示：

<style>
.div1{
    width:150px ;
    height: 0px;
    text-align: center;
    /*border-top:100px solid transparent;*/
    border-bottom:100px solid yellow;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
    <div class="div1">梯形</div>
</body>

注：左右的border的宽度决定了梯形的宽度，底部的border的大小决定梯形的高度。
5、六边形代码展示：

<style>
.div1{
    width: 0px;
    height: 0px;
    border-bottom: 70px solid pink;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    text-align: center;
}
.div2{
    width:200px;
    height: 100px;
    background: pink;
    text-align: center;
}
.div3{
    width: 0px;
    height: 0px;
    border-top: 70px solid pink;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    text-align: center;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>

注：六边形是由三个div拼接而成，需要两个三角形和一个长方形来拼接。
7、鸡蛋形代码展示：

<style>
.div1{
    width: 100px;
    height: 150px;
    background: pink;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    text-align: center;
}

</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1">鸡蛋</div>
</body>

注：border-radius的值百分号前设置的是水平方向上的弧度值即为上下边，百分号后设置的是竖直方向上的弧度值即为左右边。
8、消息框形状代码展示：

<style>
.div1{
    width: 0px;
    height: 0px;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:20px solid transparent;
    border-right:30px solid skyblue;
    margin: 50px 0 0 50px;
    float: left;
}
.div2{
    width: 200px;
    height: 100px;
    background: skyblue;
    border-radius: 10px;
    float: left;
    margin-top: 30px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>

注：这个形状也需要div拼接来实现，同时需要定位三角形的位置，用transform来设置三角形的旋转，某些情况也可以不用设置。
9、上述代码图片效果：
这里写图片描述

xiao姝姝

关注

12
点赞
踩
50

收藏

觉得还不错? 一键收藏
2
评论
如何实现不规则的Div外部形状？

如何实现不规则的Div外部形状？一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。 1、设置圆形的div 代码展示：&lt;style&gt;.div1{ width: 100px; height: 100px; bac...
复制链接

扫一扫