html div 不规则形状,CSS DIV制作梯形状的不规则网站导航

最新推荐文章于 2024-08-23 10:53:05 发布

爱雪君

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量971

点赞数

文章标签： html div 不规则形状

本文介绍了如何使用CSS和HTML div创建不规则的梯形状导航菜单。通过设置负边距、浮动和定位，实现了菜单项在鼠标悬停时展现梯形效果。在实现过程中，需要注意IE与Firefox的兼容性问题，通过触发hasLayout和合理使用z-index确保在各浏览器中的正确显示。

摘要由CSDN通过智能技术生成

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图(图片只是大致做了一下)

效果展示：

运行代码框

无标题文档

* {margin:0;padding:0;font:normal 12px/25px "宋体";}

body {background:#f8f8f8;}

ul {list-style:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;widt

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱雪君

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS:两种方式画一个梯形

止水

12-15

2万+

在html网页设计中，常会结合css绘制一些简单的形状，当然除简单的矩形之外，最近在网页设计过程中，我遇到了要画一个梯形的需求，经过学习之后，总结两种方式画一个梯形，这里只是针对梯形，其他情况另作参考。利用border 利用这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。理解方式：理解代码：建立一个div,高度为0,宽度400p...

CSS DIV制作梯形状的不规则网站导航

01-19

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。先看图（图片只是大致做了一下）效果展示：运行代码框<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <met

参与评论您还未登录，请先登录后发表或查看评论

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

热门推荐

qq_42988963的博客

09-03

1万+

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

只用一个 HTML 元素可以写出多少形状？——不规则图形篇

Conan9912345的博客

08-23

930

您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？

div 实现梯形

比旎

11-18

1万+

梯形的实现： - <div class="front_div"> <div class="transform_div"></div> <div class="box"> 内容部分 </div> </div> ``` 对应css .transform_div{position: ab

html 形状div,div+css实现各种形状（精心整理）

weixin_30444517的博客

06-03

3619

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...

纯css实现多种不规则图形,并生成代码

Choicc的博客

03-17

644

网站链接: https://bennettfeely.com/clippy/ 如图: 使用方式: ①网页右侧选择所需图形 ②对图形进行随意拉伸,直至满意 ③复制网页下方css代码

HTML 不规则形状

qq_52848404的博客

03-09

1848

【代码】HTML 不规则形状。

不规则形状排列的css菜单导航.zip

07-11

"不规则形状排列的css菜单导航"是一个创新的设计概念，通过CSS技术实现各种独特的菜单布局，为用户提供视觉吸引力的同时增强交互体验。下面将详细探讨这个主题中的核心知识点。首先，CSS（Cascading Style Sheets...

不规则TAB选项卡效果

最新发布

09-21

不规则TAB选项卡效果，用CSS+DIV进行了整理，兼容IE和FF，辛苦整理

有利于SEO的DIV+CSS的命名规则小结

09-25

【SEO友好的DIV+CSS命名规则总结】在网站开发中，遵循一定的命名规则对于SEO（搜索引擎优化）至关重要，因为这不仅有助于提高代码可读性和团队协作效率，还能确保搜索引擎更好地理解网页内容。以下是一些关于如何...

html5 不规则div,HTML5/CSS3使用不规则圆形模拟雨水动画

weixin_35647541的博客

06-09

198

JavaScript语言：JaveScriptBabelCoffeeScript确定$.coinFlip = function() {return Math.random() > .5;}var h;var w;$(document).ready(function() {h = $('body').outerHeight();w = $('body').outerWidth();drops(...

html div 不规则形状,css如何设置不规则div？

weixin_28730403的博客

06-03

2910

一般在我们用html写出来的div都是方形的div，如果我们要写不规则的div要怎么办呢？我们可以使用css3的transparent或者border-radius或者transform来实现。css设置不规则div的方法示例：1、设置圆形的div 代码展示：.div1{width: 100px;height: 100px;background: red;border-radius: 50%;te...

html 画梯形容器,css怎么画梯形？

weixin_34966374的博客

06-05

2932

在html网页设计中，常会结合css绘制一些简单的形状，那么使用css该如何画梯形呢？下面我们来看一下使用css画梯形的方法。css绘制梯形的方法：1. 利用border加粗方式这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。理解代码：建立一个div,高度为0,宽度400px(可以理解为一个矩形，但矩形的高度为0，自然这个矩形就这垂直方向压缩成了...

用Div+CSS完成一个等腰梯形

lelewang123的博客

11-09

5594

1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置

div网页布局（做一个简单网页界面为例）

weixin_47314602的博客

08-05

5256

做一个简易的网页，分为多个模块，背景设置为自己喜欢的图片。添些图片和文字链接跳转，整体排列居中。eg:在中添加这个代码才可进行CSS工具的使用。添加图片背景；透明度设置；模块大小位置设置；文字链接添加；如何添加各id的样式;...

CSS中元素的边框border的应用(制作梯形和三角形)

ztnhnr的专栏

08-02

1964

要实现在页面上点击指定元素时，弹出一个信息提示框。因为本人对 CSS 的应用不太熟练，网上搜了一些实现的方式。在使用时，发现提示框的创建用到三角形的生成。本文记录如何使用 CSS 创建梯形和三角形。实现的原理是设置元素的边框 border 属性创建梯形和三角形。在生成三角形之前，我们可以看下面的2个例子。生成梯形例子：如果指定一个 div 的宽高相等，再单独设置每个边框的颜色和宽度（边框宽度相等），这时，我们可以发现div的四个方向上都是一个梯形，如下： ...

css实现标题栏梯形效果

weixin_34259559的博客

04-20

1170

如图要实现这里标题栏效果，可以使用css而不用图片 <div class="header-slide"> <span class="span-left on">项目总浏</span> <span class="span-right">实时监控</span> </div> 复制代码 .header-slide {...

css 不规则边角_css实现四种常见边框内外角组合

weixin_39980002的博客

12-22

1029

首先让我们先来看看效果图吧：展示图其中，div1:边框内外直角矩形;div2:边框内外圆角矩形;div3:边框内直角外圆角;div4:边框内圆角外直角。接下来我们来看看实现代码，为了方便，我就直接用div1,2,3,4称呼它们吧。这里我先将我用到的通用类写出来:.font{color:#00ff00;text-align: center;}.divSize{margin:2em;width:5em...