知识点
1、border-radius:0 0 5px 5px 顺时针方向设置
2、三角的实现
a 、width:0 ;height:0 ;content=”“;
b、border:5px solid #FFF;
c、border-color:transparent transparent transparent #FFF; 顺时针方向
3、:target使用
有URL指向的元素才可以使用:target来替代,且只有点击链接时才会触发
如.例子中menuItem 被A标记所指向,所以使用menu :target h2:before
4、布局方式及A标记的链接指向问题(指向上级ID)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css" media="screen">
.menu{width:500px;background:#fff;color:#333;margin:0 auto;padding:15px;}
.menuItem{margin:5px 0;}
.menu h2{position:relative;padding:0;margin:0;}
.menu h2:before{position:absolute;right:10px;top:23px;
height:0;content:"";width:0;border:5px solid #FFF;border-color:#FFF transparent transparent;}
.menu h2 a{height:30px;line-height:30px;padding:10px;color:#fff;font-size:16px;font-weight:bold;display:block;text-decoration:none;background:#006fcd;border-radius:5px 5px 0 0;}
/*.menuItem{width:500px;background:#fff;color:#333;margin:0 auto;padding:15px;}
.menu p{height:0px;padding:0 5px;overflow:hidden;-moz-transition: height 0.5s ease-in;-webkit-transition:height 0.5s ease-in;transition:height 0.5s ease-in;}*/
.menu p{margin:0;display:none;height:80px;padding:20px;overflow:hidden;
-moz-transition: height 0.5s ease-in;
-webkit-transition:height 0.5s ease-in;
transition:height 0.5s ease-in;
}
.menu :target h2:before{border-color:transparent transparent transparent #006fcd;}
.menu :target h2 a{background:#FFF;color:#006fcd;border-left:1px solid #006fcd;border-right:1px solid #006fcd;border-top:1px solid #006fcd;border-radius:3px 3px 0 0 ;}
.menu :target p{display:block;border:1px solid #006fcd;border-radius:0 0 3px 3px;}
</style>
<body>
<div class="menu">
<div class="menuItem" id="A">
<h2><a href="#A" >A</a></h2>
<p>A IS BEST </p>
</div>
<div class="menuItem" id="B">
<h2><a href="#B" >B</a></h2>
<p>B IS GOOD </p>
</div>
<div class="menuItem" id="C">
<h2><a href="#C" >C</a></h2>
<p>C IS NOT BAD </p>
</div>
</div>
</body>
</html>