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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42988963/article/details/82354221

如何实现不规则的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、上述代码图片效果:
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

展开阅读全文

不规则形状

03-20

☆ Java程序员居家旅行必备课程 ☆<br />rn<br />rnJava学习指南系列的第4篇,介绍基于Java Swing的的高级应用技术。本篇的前一篇是Swing入门篇。<br />rnSwing系列教程分为两篇:(1) Swing入门篇 (2) Swing高级篇。<br />rn<br />rn本篇内容至少包含:<br />rn- 高级绘制技术,包含线型、渐变色、文本的精确绘制<br />rn- 不规则形状及图表的绘制<br />rn- 工作线程与界面线程的原理<br />rn- 短任务、长任务、定时任务的应用举例<br />rn- 弹出式窗口 Popup的使用方法<br />rn- 短消息提示 Toaster 的设计与使用<br />rn- 事件处理机制,鼠标键盘事件处理,以及一个基于键盘操作的“推箱子”游戏&nbsp;<br />rn- 多行文本的显示<br />rn- 图片操作:缩放、剪裁、旋转、镜像,以及一个屏幕截图程序的实例<br />rn- 管理型应用界面的框架<br />rn- 向导型应用界面的框架<br />rn- 文档型应用界面的框架<br />rn- 拖放支持 Drag &amp; Drop,一个可拖拽排序的列表,以及一个拼图游戏的实现<br />rn<br />rn* 课程特色 *<br />rn轻快 - 采用小章节教学,学起来轻松<br />rn实用 - 以实际工程需要出发来设计课程<br />rn有趣 - 穿插大量特效实例,增加趣味性和学员的成就感<br />rn专业 - 课程中采用的代码库,就是经过良好封装的成熟的库<br />rn<br />rn本篇穿插多个实例,通过实例,综合运用多种技术,使学员对项目的构建有所有认识。<br />

没有更多推荐了,返回首页