仿海棠学院列表效果
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/2.css"/> </head> <body> <div class="show-list"> <h1>我是标题</h1> <ul> <li> <div> <span>放下盲目的自信,去找一位好教练</span> </div> </li> <li> <div> 放下盲目的自信,去找一位好教练 </div> </li> <li> <div> 放下盲目的自信,去找一位好教练 </div> </li> <li> <div> 放下盲目的自信,去找一位好教练 </div> </li> </ul> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@import "public.css"; .show-list{ width:400px; margin:20px auto; border-radius:10px; background:#3a404d; } .show-list h1{ padding:10px; color:#fff; font-size: 22px; } .show-list ul{ counter-reset: show-list;/*计数器*/ } .show-list li{ position:relative; width:100%; font-size:16px; counter-increment: item;/*计数器*/ color:#fff; background: green; cursor: pointer; z-index:100; transition:all 0.3s linear } .show-list li:last-child{ border-radius:0 0 10px 10px; } .show-list li div{ padding:20px 50px; } .show-list li:before{ content: counter(item)/*"."*/;/*计数器*/ display: block; position:absolute; left:20px; top:50%; margin-top:-10px; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; color:#0b391a; background:#fff; } .show-list li:after{ content:">"; position:absolute; right:16px; top:50%; margin-top:-5px; width:10px; height:10px; line-height:10px; text-align:center; color:#0b391a; } .show-list li:hover{ transform:scaleX(1.03) } .show-list li div:before,.show-list li div:after{ position:absolute; z-index:10; content: ""; width:0; height:0; } .show-list li:nth-child(1) div:before,.show-list li:nth-child(1) div:after{ bottom: -10px; border-top: 10px solid green; } .show-list li:nth-child(2) div:before,.show-list li:nth-child(2) div:after{ bottom:-6px; border-top: 6px solid green; } .show-list li:nth-child(3) div:before,.show-list li:nth-child(3) div:after{ bottom:-2px; border-top: 2px solid green; } .show-list li:nth-child(4) div:before,.show-list li:nth-child(4) div:after{ top:-6px; border-bottom: 6px solid green; } .show-list li:nth-child(1) div:before{ left: 0; border-left: 10px solid transparent; } .show-list li:nth-child(1) div:after{ right: 0; border-right: 10px solid transparent; } .show-list li:nth-child(2) div:before{ left: 0; border-left: 6px solid transparent; } .show-list li:nth-child(2) div:after{ right: 0; border-right: 6px solid transparent; } .show-list li:nth-child(3) div:before{ left: 0; border-left: 6px solid transparent; } .show-list li:nth-child(3) div:after{ right: 0; border-right: 6px solid transparent; } .show-list li:nth-child(4) div:before{ left: 0; border-left: 6px solid transparent; } .show-list li:nth-child(4) div:after{ right: 0; border-right: 6px solid transparent; }