【CSS3】------- CSS3实现带小三角形的div框

雨点打透心脏的1/2处 2021-11-15 11:16 237阅读 0赞

> 1.[用*CSS3*实现带小三角形的div框][CSS3_div](代码如下：)

> 2.截图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
           .container{
               display: flex;
           } 
           .row-k{
               width: 300px;
               height: 250px;
               border:1px solid #eee;
               box-shadow:0px 1px 3px 1px #eee;
               border-radius: 4px;
               margin: 50px;
               text-align: center;
               border: 1px solid #eee;
               position: relative;
           }
           .row-k::before{
                content: "";
                position: absolute;
                left: 95px;
                top: -56px;
                width: 10px;
                height: 10px;
                margin: 50px;
                transform: rotate(45deg);
                background: #fff;
                z-index: 0;
                border-top: 2px solid #eee;
                border-left: 2px solid #eee;
           }
           .row-k:hover{
            animation: aniContainer 2s infinite alternate;
           
           }
           .row-k:hover::before {
            animation: aniContainer2 2s infinite alternate;
    
           }
           @keyframes aniContainer2 {
            0%, 10% {
                border-top:1px solid red;
                border-left:1px solid red;
            }
            90%, 100% {
                border-top:1px solid blue;
                border-left:1px solid blue;
            }
           }
           @keyframes aniContainer {
            0%, 10% {
                border:1px solid red;
            }
            90%, 100% {
                border:1px solid blue;
            }
          }
    
       
    
         
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="">
                    <div class="row-k">
                            <p><h3>静夜思</h3></p>
                            <p style="font-size:14px;">(唐)李白</p>
                            <p>床前明月光</p>
                            <p>疑是地上霜</p>
                            <p>举头望明月</p>
                            <p>低头思故乡</p>
                      </div>
            </div>
            <div class="">
                    <div class="row-k">
                            <p><h3>静夜思</h3></p>
                            <p style="font-size:14px;">(唐)李白</p>
                            <p>床前明月光</p>
                            <p>疑是地上霜</p>
                            <p>举头望明月</p>
                            <p>低头思故乡</p>
                      </div>
            </div>
    
    
              
        </div>
      
    </body>
    </html>

[CSS3_div]: https://www.baidu.com/link?url=FpqrChaeasYVM6inJm1rRQTfZ1dQ48m1laYJjasOhFgWOWeadWsMbJ_G_ob57ChKVPhpLi_60q8xyLBANV8nvq&wd=&eqid=a4ec3533000707b2000000055d4137d7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: /images/20211115/e877afd6043e4efc8088a672c960139b.png