css3 如直角(圆角)梯形

html-css020

css3 如直角(圆角)梯形,第1张

.div{

height: 80px

width: 250px

background-color: #FFC800

margin: 50px

border-radius: 15px

transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0)

}

border-radius:12px

圆角 为零则为直角

梯形 [元素变形]

transform:

perspective [透视距离]

rotateX [横向.x轴旋转]

rotateY [竖向.Y轴旋转]

translateZ [Z轴移动,可以理解为放大和缩小]

了解这些基本的变形用法,就可以实现 【梯形】,

但复杂一些就没办法了,要用到SVG或Canvas,

问题:css3做圆角右边是圆角左边是直角

解答:注意css改动这里,nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}

理解:border-radius属性

1)border-radius:10px等价于:border-top-left-radius:10pxborder-top-right-radius:10pxborder-bottom-right-radius:10pxborder-bottom-left-radius:10px

2)border-radius:1px 2px 3px 4px 等价于:border-top-left-radius:1pxborder-top-right-radius:2pxborder-bottom-right-radius:3pxborder-bottom-left-radius:4px

纠错:您的html代码不全,我补全并修改后的代码如下,请查看~

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>Apple</title>

<style>

body{ background-color: #F2F2F2}

header {background-color:#333border-radius:10px}

nav{ display:block background-color:#333 width:840px margin:0 50px 0 0 padding:0 10px 20px 5px}

nav ul { list-style:none background-color:#999}

nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}

nav ul li a{ color:#FFF text-decoration:none font-size:20px }

nav ul li a:hover{color:#000 text-decoration:none border-bottom:1px solid #ff5400 padding-bottom:2px}

</style>

</head>

<body>

<header>

<nav>

<div>

<ul>

<li><a>Apple</a></li>

<li><a>在线商店</a></li>

<li><a>Mac</a></li>

<li><a>ipod</a></li>

<li><a>iphone</a></li>

<li><a>ipad</a></li>

<li><a>iTunes</a></li>

<li><a>技术支持</a></li>

</ul>

</div>

</nav>

</header>

</body>

</html>