尖角div

xiaoxiao2021-02-28  8

一、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>

转载请注明原文地址: https://www.6miu.com/read-2149981.html

最新回复(0)