用代码做边框斜角怎么做

html-css026

用代码做边框斜角怎么做,第1张

css实现斜角原理：

把border进行旋转：

border: 2px solid #FFF

-webkit-transform: rotate(204deg)

预览效果页面：

http://each.sinaapp.com/game/index.html

可以。用CSS可以做到。但是CSS3在IE9以下的浏览器支持不好。我写个例子，先看效果(火狐下)：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <link href="xxx/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />

    <title>CSS3 多边形</title>

</head>

<body>

<style type="text/css">

.pxsbx{ width: 100px height: 60px -webkit-transform: skew(-20deg) -moz-transform: skew(-20deg) -o-transform: skew(-20deg) background: #669margin-left:20px }

</style>

<div class="pxsbx"></div>

</body>

</html>

设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。

1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。

2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。

3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就多出来一个间隔线，好看。

具体细节需要把握，代码举例：

xlMenu a { background:url(menuLine.gif) no-repeat display:block width:77px text-align:center float:left}

.xlMenu a.first { width:43px background:none text-align:left}

效果：

小图标：

很小很小的一条线。。。