``````	<div class="show">
<div class="demo">
<details class="details-1" open="">
<summary>这是示例1</summary>
<content>本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。</content>
</details>

<details class="details-2" open="">
<summary>这是示例2</summary>
<content>本案例隐藏原生小三角，使用自定义小三角。</content>
</details>
</div>
</div>``````
``````body {
display: flex;
justify-content: center;
padding: 2vw;
}
.show{
padding-bottom:20px;
min-width: 50vw;
}
.show h5{
font-size:13px;
line-height:20px;
padding:10px 0 2px 2px;
margin:0 0 0 8px;
}
.demo{
padding:10px;
}
details {
margin: 1rem 0;
}
details:active,
details:focus,
summary:active,
summary:focus{
outline: none 0;
}

.details-1 summary {
width: -moz-fit-content;
width: fit-content;
direction: rtl;
}
.details-1 ::-webkit-details-marker {
direction: ltr;
color: gray;
margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
direction: ltr;
color: gray;
margin-left: .5ch;
}

.details-2 {
background-color: #f5f7f7;
}
.details-2 summary {
padding: 5px;
background-color: #f0f0f0;
}
.details-2 content {
display: block;
padding: 5px;
}
/* 自定义的三角 */
.details-2 summary::after {
content: '';
position: absolute;
width: 1em; height: 1em;
margin: .2em 0 0 .5ch;
background: url(http://www.zhangxinxu.com/study/201801/arrow-on.svg) no-repeat;
background-size: 100% 100%;
transition: transform .2s;

}
.details-2:not([open]) summary::after {
margin-top: .25em;
transform: rotate(90deg);
}
/* 隐藏默认三角 */
.details-2 ::-webkit-details-marker {
display: none;
}
.details-2 ::-moz-list-bullet {
font-size: 0;
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.