纯css下拉菜单: 纯 css 实现斜角 by colinivy

css实现斜角的原理主要是利用了div两相互垂直的border的交界 （斜角组合还有更多变化。。。）
<!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>
< http-equiv="Content-Type" content="text/html; charset=utf-8" />
< name="robots" content="all" />
< name="author" content="colinivy" />
<link href="http://www.cxybl.com/style/global.css" rel="stylesheet" type="text/css" media="screen" />
<title> Colinivy's world</title>
<style type="text/css">
* {margin:0; padding:0; list-style:none;}
body {
font-size:63%;
}
#wrapper {
margin:20px;
width:200px;
border: 1px solid #ccc;
font-size:1.2em;
}
#corner {
position:relative;
top:-1px;
left:-1px;
width:0px;
height:0px;
overflow:hidden;
border-top:15px solid #fff;
border-right:15px solid #ccc;
}
#wrapper p {
padding:5px;
text-indent:20px;
}
#joy_left {
width:20px;
height:0px;
overflow:hidden;
border-top:20px solid green;
border-left:20px solid #FFF;
}
#joy_top {
top:-20px;
width:0px;
height:20px;
border-top:20px solid #FFF;
border-right:20px solid red;
}
#joy_bottom {
left:-40px;
top:20px;
width:0px;
height:20px;
border-left:20px solid blue;
border-bottom:20px solid #FFF;
}
#joy_right {
left:-40px;
top:20px ;
width:20px;
height:0px;
overflow:hidden;
border-right:20px solid #FFF;
border-bottom:20px solid #666;
}
.por {
position:relative;
float:left;
}
</style>
</head>
<body>
<div id="wrapper" >
<div id="corner">
</div>
<p>www.cxybl.com</p>
<p>www.cxybl.com</p>
<p>www.cxybl.com</p>
</div>
<div id="joy_left" class="por">
</div>
<div id="joy_top" class="por">
</div>
<div id="joy_bottom" class="por">
</div>
<div id="joy_right" class="por">
</div>
</body>
</html>
本文链接http://www.cxybl.com/html/wyzz/CSS/20130601/38193.html

时间： 2024-10-04 17:35:19

纯css下拉菜单: 纯 css 实现斜角 by colinivy的相关文章

纯css下拉菜单 无需js_javascript技巧

再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

简单实用的下拉菜单（CSS+jquery）

原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!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"

css 下拉菜单代码

提示:您可以先修改部分代码再运行 css 下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

css下拉菜单导航条

提示:您可以先修改部分代码再运行 css下拉菜单导航条 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

div css 下拉菜单效果代码

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conten

完全CSS下拉菜单，只用CSS，纯CSS构筑！

核心提示:纯CSS构筑的下拉导航菜单! 看看CSS代码,要注意认真看,好好研究哦! <style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul

纯css下拉菜单实现代码

More script and css style : www.111cn.net Home Services Webdesign">Webdesign Developement">Development Illustration">Illustration Search Engine">Search engine Wordpress">Wordpress Blog Themes">Themes Plugins

兼容主流浏览器，纯CSS下拉菜单

DEMOS zero dollars advertising page wrapping text around images styled form active focus hover/click with no borders styled form removing active/focus borders hover/click shadow boxing image map for detailed information fun with background images fad

纯CSS3下拉菜单效果代码

首页 前端开发 CSS & CSS3 JS & jQuery HTML5 DOTNET 网站素材 WordPress