用div加css怎么做出这种菱形框架??或者其他方法??

html-css06

用div加css怎么做出这种菱形框架??或者其他方法??,第1张

<div

style=“height:300pxwidth:200pxborder:solide

1px

blue”></div>

关键是你的div要有一定的宽高。另外边框的颜色不要和背景色一样，这样也会看不出来

可以画两个等腰三角形，等腰三角形代码#ID {

width: 0

height: 0

border-left: 50px solid transparent

border-right: 50px solid transparent

border-bottom: 100px solid red}

border-style:边框样式

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸