项目实战之玩转div+css制作自定义形状

最新推荐文章于 2022-08-04 16:32:24 发布
最新推荐文章于 2022-08-04 16:32:24 发布
阅读量4.7k 收藏 5
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxl0921/article/details/47707875
版权

项目需求


要求制作上图所示的效果，能达到灵活可配的效果。我想初步想法是用div+css来制作。

------------------------------------------------------------------------------------------------------

模型抽象

下面的这个模型是我抽象出来的一个简单的解决方案。div可以表示一个矩形，然后再加上一个旋转90度的div就可以组起来达到我们想要的效果了。使用div就可以很方便地相应各种事件，使网站灵活可配。

------------------------------------------------------------------------------------------------------

技术难点

1、如何做到让div旋转？

       -moz-transform: rotate(90deg);

       如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

2、如何设置div的层次关系？

       z-index

------------------------------------------------------------------------------------------------------

实践过程

HTML页：

-------------------------------------------------------------------------

<html>
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="css/chainselect.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/text.js"></script>
    </head>
    
    <body>
        <div id="rectangle1" οnmοusemοve="MouseMove(this)">新生报到流程</div>
        <div id="arrow1" οnmοusemοve="MouseMove(this)"></div>
        
        <div id="arrow21"></div>
        <div id="rectangle2">公约页</div>
        <div id="arrow22"></div>
        
        <div id="arrow31"></div>
        <div id="rectangle3">完善个人信息</div>
        <div id="arrow32"></div>
        
        <div id="arrow41"></div>
        <div id="rectangle4">选择缴费方式</div>
        <div id="arrow42"></div>
        
        <div id="arrow51">sss</div>
        <div id="rectangle5">新生报到流程</div>
    </html>

-------------------------------------------------------------------------

CSS页

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------


#rectangle1 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  }
#arrow1 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-14px;
  border-bottom:none;
  border-left:none;
 
}
#arrow21{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-35px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle2 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-50px;
  z-index:-2;
  border-left:none;
  }
  #arrow22 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-63px;
  border-bottom:none;
  border-left:none;
}
#arrow31{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-84px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle3 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-100px;
  z-index:-2;
  border-left:none;
  }
    #arrow32 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-113px;
  border-bottom:none;
  border-left:none;
}

#arrow41{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-134px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle4 {
  border:2px solid;
  border-right:none;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-148px;
  z-index:-2;
  border-left:none;
  }
    #arrow42 {
  float:left;
  -moz-transform: rotate(45deg);
  border:2px solid;
  background-color:#34B0D9;
  width:25px;
  height:25px;
  position:relative;
  top:5px;
  left:-161px;
  border-bottom:none;
  border-left:none;
}


#arrow51{
    float:left;
    -moz-transform: rotate(45deg);
    border:2px solid;
    background-color:#FFFFFF;
    height:32px;
    width:32px;
  position:relative;
  left:-180px;
  top:5px;
  z-index:-1;
    border:none;
}  
#rectangle5 {
  border:2px solid;
  background-color:#34B0D9;
  width:169px;
  height:29px;
  float:left;
  text-align:center;
  font-size:16px;
  padding-top:5px;
  float:left;
  position:relative;
  left:-196px;
  z-index:-2;
  border-left:none;
  }

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

实践效果


总结思考

1、面对复杂的问题，要学会抽象当前的问题。

2、不将就是发现的原动力。



彭薄
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 34
    评论
html 形状div,div+css实现各种形状（精心整理）
weixin_30444517的博客
06-03 3390
1.正方形.div {width: 100px;height: 100px;background: red;}2.矩形.div {width: 200px;height: 100px;background: red;}3.圆形.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-borde...
如何实现不规则的Div外部形状？
热门推荐
qq_42988963的博客
09-03 1万+
如何实现不规则的Div外部形状？ 一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。 1、设置圆形的div 代码展示： &lt;style&gt; .div1{ width: 100px; height: 100px; bac...
div+css制作圆角矩形的原理示例解读
09-25
圆角矩形的制作想必大家都会吧，但真正的实现原理想必并没有几个人知道，在本文有个不错的示例或许能帮助大家更好的理解其中的原理，感兴趣的朋友可以参考下
html div 不规则形状,css如何设置不规则div？
weixin_28730403的博客
06-03 2744
一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。css设置不规则div的方法示例：1、设置圆形的div 代码展示：.div1{width: 100px;height: 100px;background: red;border-radius: 50%;te...
项目实战之玩转div+css制作自己定义形状
weixin_34080903的博客
07-18 438
项目需求 要求制作上图所看到的的效果，能达到灵活可配的效果。我想初步想法是用div+css来制作。 ------------------------------------------------------------------------------------------------------ 模型抽象 以下的这个模型是我抽象出来的一个简单的解决方式。di...
十四，div设置
好多可乐的博客
12-15 2996
DIV简介： 一，什么是div？ div是层叠样式表中的定位技术，全称division 有时把div称为图层，更多时候称为“块” 二，div样式设置 div大小，背景设置 div溢出效果展示，换行，滚动条显示 div边框，轮廓设置 盒子模型 div{ background-color: yellow; width: 100px; height: 100px; position: absolute; top: 200px; left:
CSS div变换形状
Erek的前端博客；
09-03 1034
两边向两侧拉伸效果,如下图 html <div id="app"> <div class="main"> <div class="center-block" :class="'block-' + (index + 1)" v-for="(item,index) in 3"> <div class="block-title"> <div class="name">方块-{{index + 1}}&..
DIV+CSS简单登录界面模板
06-06
DIV+CSS简单登录界面模板，DIV+CSS布局，有用户名、密码登录框，登录按钮。
div+css实战案例html整站模板下载
04-02
div+css实战案例html整站模板下载
div+css布局制作横向带箭头步骤流程样式
11-08
div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式
Js菜单生成工具（DIV CSS菜单在线生成器）.rar
07-10
Js菜单生成工具（DIV CSS菜单在线生成器），包括生成一些圆角的菜单，十分方便，用起来也十分方便。用它生成的菜单无论是在功能或是外观方面都很不错，而且兼容各大浏览器，生成的菜单你可直接复制代码文件就可使用，可生成多级的展开菜单。
网页自动生成DivCss软件-(PC+手机+公众号)全能版
06-26
您是否还为花几个小时，甚至几天对网页效果图进行切片、制作DIV和CSS而烦恼？ 您是否还为完成紧急任务，而人手不足而苦恼？ 您是否还为快速展示、快速开发、快速成交而苦恼？ 您是否还为制作标准的div+css，反反复复的调试而苦恼？ ........ 用本软件吧，只需要导入效果图，拉框线就可以生成标准的兼容性的DIV+CSS，是公众号开发、手机网页开发、平板网页开发、网页制作，网页切片、企业网站、门户网站网页布局开发、批量做模板的最佳工具。 好的工具可以让您事半功倍，还等什么呢，赶快行动吧！ 您是否还为花几个小时，甚至几天对网页效果图进行切片、制作DIV和CSS而烦恼？ 您是否还为完成紧急任务，而人手不足而苦恼？ 您是否还为快速展示、快速开发、快速成交而苦恼？ 您是否还为制作标准的div+css，反反复复的调试而苦恼？ ........ 用本软件吧，只需要导入效果图，拉框线就可以生成标准的兼容性的DIV+CSS，是公众号开发、手机网页开发、平板网页开发、网页制作，网页切片、企业网站、门户网站网页布局开发、批量做模板的最佳工具。 好的工具可以让您事半功倍，还等什么呢，赶快行动吧！ 软件具有以下特点： 软件自动对齐切片，保证切片准确无误 可手工进行细调，灵活多变 可保存设计文档，以便下次使用 多个批量操作菜单，快速方便 自动升级，功能自动增强 一次注册，终身服务 支持IE6、IE7、IE8、IE9、火狐、谷歌浏览器、360浏览器、搜狗高速浏览器、傲游浏览器、腾讯TT浏览器、苹果浏览器、世界之窗浏览器等等现在常用的浏览器 一个好的软件，几分钟就可以搞定几个小时、甚至几天的工作，高效快捷，您还等什么呢，赶快下载试用吧！ 软件具有以下特点： 软件自动对齐切片，保证切片准确无误 可手工进行细调，灵活多变 可保存设计文档，以便下次使用 多个批量操作菜单，快速方便 自动升级，功能自动增强 一次注册，终身服务 支持IE6、IE7、IE8、IE9、火狐、谷歌浏览器、360浏览器、搜狗高速浏览器、傲游浏览器、腾讯TT浏览器、苹果浏览器、世界之窗浏览器等等现在常用的浏览器 一个好的软件，几分钟就可以搞定几个小时、甚至几天的工作，高效快捷，您还等什么呢，赶快下载试用吧！
div+css.zip_div+css
09-23
压缩包里面的文件是一些关于学习Div+Css布局的文件文档，能够有效帮助初学者快速入门掌握。
css的div绘制各种图形值得收藏
lele的博客
09-11 1105
https://css-tricks.com/the-shapes-of-css/
基于数据驱动的，自定义div任意布局框架，可鼠标拖动调节的div大小
JAMES费的空间
08-04 799
最近在想用web页面作为机器人前端的控制界面，以前对前端有点粗浅的技术储备。查了一些资料，发现前端可以设计出非常漂亮的界面，并且可以不限于计算机本地运行，那么如果将机械臂的控制UI用web界面实现是非常有好处的，一个好处是可以实现异地的操控，这不就是传说中的远程控制吗，想象一下这样一副场景：一个打工仔不用去工厂，在家打开浏览器登录工厂机械臂的工号，就可以操作机械臂干活了，当然这个活是较为精细的，机器智能还不能代替人干的那种。...
css div自定义属性,初步认识css自定义属性
weixin_29306571的博客
08-04 629
今天，CSS预处理器是Web开发的标准。 预处理器的一个主要优点是它们使您能够使用变量， 这有助于您避免复制和粘贴代码，并简化了开发和重构。在本文中，您将了解到如何将CSS变量集成到CSS开发工作流程中，这会使得样式表更易于维护和不重复性。现在，让我开始吧！1* css变量的语法<1> 什么是css变量？如果您使用过任何一种编程语言，那么您应该已经熟悉了变量的概念。 变量允许您存储和更...
css 自定义 形状 图形,CSS自定义形状椭圆形
weixin_31983133的博客
08-04 254
3 个答案:答案 0 :(得分：2)这是你在寻找什么？.oval {background: #363636 none repeat scroll 0 0;border: 2px solid #fff;border-radius: 100%;height: 170px;margin-top: 5%;transform: rotate(-8deg);width: 400px;}.blackfriday...
使用DIV+CSS制作网站首页
最新发布
04-23
好的，我可以为您提供一些关于DIV CSS制作网站首页的基本知识。DIV是一种HTML标签，用于将HTML文档划分为不同的区域，CSS则是一种样式表语言，用于添加样式和布局到HTML文档。要制作网站首页，您需要先设计页面的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值