css三角制作的方法8.12

「爱情、让人受尽委屈。」 2022-09-04 06:59 136阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 3]  
三角形的大小取决于边框的粗细。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][b45b4f9607994fc18a26780d8a341c5d.png]![在这里插入图片描述][5d5129880111413d981721a7ecc70cdf.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 7]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 8]

![在这里插入图片描述][64847d7e599d4990b284c39fce9cef27.png]  
![在这里插入图片描述][9c12bb8a3a1442ab8c6b684b093b3456.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 12]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][d4ba2ab6f9284552a858663602e47e93.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][e6287f27948748e980d9d27284a2c9da.png]  
![在这里插入图片描述][361cf65fbc26425f9ba14a3e3a6188d4.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 23]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 24]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 25]![在这里插入图片描述][8307951e69ab4297afc63081be83ac08.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 26]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>我创建的第一个页面</title>
        <style>
          * {
            margin: 0px;
            padding: 0px;
          }
          /* div {
            width: 162px;
            background-color: blue;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          } */
          div {
            width: 162px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        </style>
      </head>
      <body>
        <div class="one">
          如果没有他你还爱我嘛如果没有他你还爱我嘛如果没有他你还爱我嘛如果没有他你还爱我嘛
        </div>
      </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70]: /images/20220829/68cdd801051546169b7892e91846cd67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1]: /images/20220829/c238cd03ed364157a067c42106295186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 2]: /images/20220829/9d703fe9f2c64b528ac9a15f8428d53b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 3]: /images/20220829/c2cb7e3d7aa745dfa3f92f2d99394685.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 4]: /images/20220829/f9885c2ab0b3414488ff590eff596882.png
[b45b4f9607994fc18a26780d8a341c5d.png]: https://img-blog.csdnimg.cn/b45b4f9607994fc18a26780d8a341c5d.png
[5d5129880111413d981721a7ecc70cdf.png]: /images/20220829/df1fc807d63f48eca874d344448c8076.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 5]: /images/20220829/fbca0c69c31248dab5c07683eb75f5cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 6]: /images/20220829/24a5b64943924c15967c8f8715f9ce8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/52b74fb903c54e80ab08c99c17ec3696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 8]: /images/20220829/5af44d6d15b8486187435025aa5373fc.png
[64847d7e599d4990b284c39fce9cef27.png]: /images/20220829/4b6b74eb3e0346f7ab72f1c0d5dfc9f8.png
[9c12bb8a3a1442ab8c6b684b093b3456.png]: https://img-blog.csdnimg.cn/9c12bb8a3a1442ab8c6b684b093b3456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 9]: /images/20220829/3ac30c1ab6b349b9a4314a21c0f1a152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 10]: /images/20220829/d08a08d9bfb641db819d56ab257ab14c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 11]: /images/20220829/f6b59da29dc94f8e964a65b84a0980a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 12]: /images/20220829/9d5ebde0bee24eca8978633635857882.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 13]: /images/20220829/b408eac44c684e2daab8297e0650dbf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 14]: /images/20220829/b339858f699a4fd58a6c75c45c8872b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 15]: /images/20220829/b8123b94fe34414c9c5c3bf5c11f498e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 16]: /images/20220829/9d8b799c0c944cf9a1a05c65d7852028.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 17]: /images/20220829/326d9a28d93e4ba686305b6ef22a1b0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 18]: /images/20220829/c032fdf748d64c9683e2743821a5a7e1.png
[d4ba2ab6f9284552a858663602e47e93.png]: /images/20220829/a1a4908c1e5440fea12ba6b8894f30ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 19]: /images/20220829/19dd64229ea44e6f9a4719fd655f8b74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 20]: /images/20220829/a45a3e6956e842bc9ba335f47a430b83.png
[e6287f27948748e980d9d27284a2c9da.png]: /images/20220829/619ce8785b054077b461803f9a748ba1.png
[361cf65fbc26425f9ba14a3e3a6188d4.png]: /images/20220829/d3071ad2222d44369f9bbe6911c18ea1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 21]: /images/20220829/0b569db60b694ca49669be5ff9de7478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 22]: /images/20220829/ceb414ee5bf64faeabe4e33bd9ff5362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 23]: /images/20220829/4838b2ca0c7f45abba27ca0315344a2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/4de193b271a44f90912027221070aac5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/19287265163242edb504d0341184b190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70
[8307951e69ab4297afc63081be83ac08.png]: /images/20220829/39664473ef3640fcbf2f32bda9b3b10e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 26]: /images/20220829/38a45a60217548889de8a07e9ab7fe3c.png