如何用div绘出有尖角的一个div框

尖角在上面

成都创新互联公司服务项目包括和平网站建设、和平网站制作、和平网页制作以及和平网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，和平网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到和平省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

代码：

html

head

title尖角div/title

style type="text/css"

#top

{

width:400px;

height:250px;

border:3px solid; /* 边框宽度为3px */

position:relative;

}

.sp1,.sp2

{

display:block;

height:0px;

width:0px;

position:absolute;

font-size:0;

line-height:0;

}

.sp1

{

top:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */

left:40px; /* 它来确定尖角的位置 */

border-top:0px;

border-bottom:6px solid black; /* 注意颜色的变化 */

border-right:6px solid white;

border-left:6px solid white;

}

.sp2

{

top:6px; /* 是自身边框宽度的2倍 */

left:-3px; /* 是自身边框宽度的-1倍 */

border-top:0px;

border-bottom:3px solid white;

border-right:3px solid black;

border-left:3px solid black;

}

/style

/head

body

div id="top"

span class="sp1"

span class="sp2"/span

/span

/div

/body

/html

尖角在下面

代码：

html

head

title尖角div/title

style type="text/css"

#bottom

{

width:400px;

height:250px;

border:3px solid; /* 边框宽度为3px */

position:relative;

}

.sp1,.sp2

{

display:block;

height:0px;

width:0px;

position:absolute;

font-size:0;

line-height:0;

}

.sp1

{

bottom:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */

left:40px; /* 它来确定尖角的位置 */

border-bottom:0px;

border-top:6px solid black; /* 注意颜色的变化 */

border-right:6px solid white;

border-left:6px solid white;

}

.sp2

{

bottom:6px; /* 是自身边框宽度的2倍 */

left:-3px; /* 是自身边框宽度的-1倍 */

border-bottom:0px;

border-top:3px solid white;

border-right:3px solid black;

border-left:3px solid black;

}

/style

/head

body

div id="bottom"

span class="sp1"

span class="sp2"/span

/span

/div

/body

/html

尖角在左边

代码：

html

head

title尖角div/title

style type="text/css"

#left

{

width:400px;

height:250px;

border:3px solid; /* 边框宽度为3px */

position:relative;

}

.sp1,.sp2

{

display:block;

height:0px;

width:0px;

position:absolute;

font-size:0;

line-height:0;

}

.sp1

{

left:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */

top:40px; /* 它来确定尖角的位置 */

border-left:0px;

border-top:6px solid white; /* 注意颜色的变化 */

border-right:6px solid black;

border-bottom:6px solid white;

}

.sp2

{

left:6px; /* 是自身边框宽度的2倍 */

top:-3px; /* 是自身边框宽度的-1倍 */

border-left:0px;

border-top:3px solid black;

border-right:3px solid white;

border-bottom:3px solid black;

}

/style

/head

body

div id="left"

span class="sp1"

span class="sp2"/span

/span

/div

/body

/html

尖角在右边

代码：

html

head

title尖角div/title

style type="text/css"

#right

{

width:400px;

height:250px;

border:3px solid; /* 边框宽度为3px */

position:relative;

}

.sp1,.sp2

{

display:block;

height:0px;

width:0px;

position:absolute;

font-size:0;

line-height:0;

}

.sp1

{

right:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */

top:40px; /* 它来确定尖角的位置 */

border-right:0px;

border-top:6px solid white; /* 注意颜色的变化 */

border-bottom:6px solid white;

border-left:6px solid black;

}

.sp2

{

right:6px; /* 是自身边框宽度的2倍 */

top:-3px; /* 是自身边框宽度的-1倍 */

border-right:0px;

border-top:3px solid black;

border-bottom:3px solid black;

border-left:3px solid white;

}

/style

/head

body

div id="right"

span class="sp1"

span class="sp2"/span

/span

/div

/body

/html

用html和css做带凹尖角的透明背景

用CSS定位的方法

css代码

.caption{width:100%;height:180px;background-color:#000;opacity:.6;position:realtive;}

.triangle{display :block;width:20px;height:20px;background:url(三角形图片路径) no-repeat;position:absolute;left:200px;top:0;}

html代码

div class="caption"span class="triangle"/span/div

validateform是基于html5的吗

是的

一、前言

前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！

目前市面上有不少表单验证插件，看似强大，实在糟糕！

总结下，有以下一些问题：

过多干预

包括：改变了表单元素UI, 为表单元素绑定过多事件等

布局等限制

包括：需要特定结构的布局，需要特定的类名或者ID

学习成本

包括：N多元作者自定义的属性，或者自定义的特定的数据结构

可用性

当JS出现错误的时候而无法正常运作的时候，验证就是聋子的耳朵——摆设，即使在现代浏览器下也是如此。

面向未来的表单验证

验证驱动

验证信息HTML驱动，例如HTML5中required, pattern, multiple等

验证形式

非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。

验证交互

浮动形式，尖角指示。

换言之，所谓面向未来的表单验证，是遵循W3C HTML5规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。

二、html5Validate概述

html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候，就是写写原生的HTML5表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。

举个简单例子，一个邮箱验证，HTML5代码表示应该是下面这个样子：

input type="email" required

好巧的是，使用html5Validate进行表单验证的时候，也是使用上面这段HTML代码！

类似下面的绑定：

$("form").html5Validate();

于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示：

跟Chrome浏览器下的提示文字近似：

html5Validate支持我所知的HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5中是忽略的），支持多type共存，例如type="email|tel", 可以让文本框输入邮箱或者手机号码。

type="date", type="hour", type="password"等因为不同网站规则不一样，因此，没有放在html5Validate中，不过，您可以很简单地进行扩展，使您的项目支持之，这个后面会介绍（参见 part 9-4）。

为了满足实际开发需求，额外增加了四个自定义属性值：data-key, data-target, data-min, data-max. 具体何用，下面会详细讲解。

支持自动的全角转半角。

注意：type="submit", type="reset", type="file", type="image"以及disabled的表单元素没有验证性可言，因此，下面所说的表单元素，并不包括他们。

兼容性

html5Validate通过jQuery1.4+测试，支持正常IE6-IE10浏览器，FireFox, Chrome等现代浏览器。

网页名称：html5尖角,html尖角效果
文章源于：http://kswjz.com/article/dsihcsi.html