尖角div

一、html代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       body{
           background-color: #8A2BE2;
       }
           div{
               width: 100px;
               height: 100px;
               background-color: aqua;
               position: relative;
               word-break: break-all;
           }
           div:before{
               content: " ";
               position: absolute;
               left:-20px;
               width: 0px;
               height: 0px;
               border: 10px solid yellow;
               border-top-color: transparent;
               border-bottom-color:transparent ;
               border-left-color: transparent;
               border-right-color:yellow ;
           }

           div:after{
               content: " ";
               position: absolute;
               right: -20px;
               bottom: 0px;
               width: 0px;
               height: 0px;
               border: 10px solid yellow;
               border-top-color: transparent;
               border-bottom-color:transparent ;
               border-left-color: yellow;
               border-right-color:transparent ;
           }
           header{
               width: 100px;
               height: 20px;
               background-color: brown;
               line-height: 20px;
               text-align: center;
               margin-top: 5px;
           }
           article{
               width: 100px;
               text-align: center;
               border: 1px solid red;
               display: none;
               color:red;
           }
           .show{
               display: block;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
       <script type="text/javascript">
           $(function(){
               $("header").click(function(){
                   if($(this).next().hasClass("show")){
                       $(this).next().removeClass("show");
                   }
                   else{
                       $(this).siblings().removeClass("show");
//                       $(this).next().addClass("show");
                       $(this).next().slideToggle(1000);
                   }
               });
           });
       </script>
   </head>
   <body>
       <div>
           225 好吧把好吧吧䒔不安䒔希U币还defefrwfe
       </div>
       <header>1</header>
       <article>
           1.1<br />
           1.2<br />
           1.3<br />
       </article>
       <header>2</header>
       <article>
           2.1<br />
           2.2<br />
           3.3<br />
       </article>
       <header>3</header>
       <article>
           3.1<br />
           3.2<br />
           3.3<br />
       </article>
       <header>4</header>
       <article>
           4.1<br />
           4.2<br />
           4.3<br />
       </article>
       <input type="text" name="n1" value="2" hidden="hidden" />
   </body>
</html>

猜你喜欢