演示
适用于以下浏览器：Chrome、Safari
1.控制黑三角通过以下伪元素做到
2. 控制黑三角也是以下元素的图标
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 body {
11 margin: 0;
12 }
13
14 summary {
15 text-align: left;
16 outline: none;
17 padding: 3%;
18 background-color: #ddd;
19 position: relative;
20 }
21
22 .details summary::after {
23 content: '';
24 position: absolute;
25 top: 30%;
26 right: 3%;
27 width: 1em;
28 height: 1em;
29 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTM3NTIyNTIwNjYwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2NTQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODgwLjEwMTc1OSA5NDUuNDg5OTAyYzE4LjAyMDE1NSAxNy44MTk4NTQgNDcuMTQzNjQ5IDE3LjgxOTg1NCA2NS4wOTcyODYgMCAxNy45NTM2MzctMTcuNzUzMzM5IDE3Ljk1MzYzNy00Ni42MTA1NzQgMC02NC40Mjk0MDVMNTQ0LjA0MjA4NSA0ODUuMTA2NDljLTE4LjAyMDE1NS0xNy44MTk4NTQtNDcuMDc3MTMxLTE3LjgxOTg1NC02NS4wOTcyODYgMEw3Ny43ODc4MzkgODgxLjA1OTQ3NGMtMTcuOTUzNjM3IDE3LjgxOTg1NC0xOC4wMjAxNTUgNDYuNjEwNTc0IDAgNjQuNDI5NDA1czQ3LjIxMDE2NiAxNy44MTk4NTQgNjUuMDk3Mjg2IDAuMDY2NTE1bDM2OC42NDEwNjQtMzUwLjE0MTYxMkw4ODAuMTAxNzU5IDk0NS40ODk5MDIgODgwLjEwMTc1OSA5NDUuNDg5OTAyeiIgcC1pZD0iMTY1NSIgZmlsbD0iIzcwNzA3MCI+PC9wYXRoPjwvc3ZnPg=='); 30 background-repeat: no-repeat;
31 background-size: 100%;
32 transition: transform .2s;
33 }
34
35 .details:not([open]) summary::after {
36 transform: rotate(90deg);
37 }
38
39 .details ::-webkit-details-marker {
40 display: none;
41 }
42
43 .details ::-moz-list-bullet {
44 font-size: 0;
45 }
46 </style>
47 </head>
48
49 <body>
50 <details class="details">
51 <summary>显示/隐藏</summary>
52 <p>这里是你所需要隐藏的内容</p>
53 <p>这里是你所需要隐藏的内容</p>
54 <p>这里是你所需要隐藏的内容</p>
55 <p>这里是你所需要隐藏的内容</p>
56 <p>这里是你所需要隐藏的内容</p>
57 </details>
58 </body>
59
60 </html>
base64图片再次减少体积：https://www.cnblogs.com/cisum/p/7754910.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 summary {
11 text-align: left;
12 outline: none;
13 padding: 3%;
14 background-color: #ddd;
15 position: relative;
16 }
17
18 details summary::-webkit-details-marker {
19 position: absolute;
20 right: 0;
21 top: 35%;
22 }
23 </style>
24 </head>
25
26 <body>
27 <details>
28 <summary>点击展开/隐藏</summary>
29 <p>这里是你所需要隐藏的内容</p>
30 <p>这里是你所需要隐藏的内容</p>
31 <p>这里是你所需要隐藏的内容</p>
32 <p>这里是你所需要隐藏的内容</p>
33 <p>这里是你所需要隐藏的内容</p>
34 </details>
35 </body>
36
37 </html>