.accordion {
  color: var(--c-foreground, #09090b);
  position: relative;

  &:not(:first-child) {
    margin-top: 1rem;
  }

  .title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border: 1px solid var(--c-border, #e4e4e7);
    border-radius: 5px;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      width: 6px;
      height: 6px;
      content: "";
      border-right: 2px solid var(--c-muted-foreground, #71717b);
      border-bottom: 2px solid var(--c-muted-foreground, #71717b);
      transition: transform 0.3s;
      transform: translateY(-20%) rotate(45deg);
    }
  }

  &::details-content {
    transition: opacity 0.5s allow-discrete;
    opacity: 0;
  }

  &[open] .title::after {
    transform: translateY(20%) rotate(225deg);
  }

  &[open]::details-content {
    opacity: 1;
  }

  & .content {
    position: relative;
    background-color: var(--c-secondary, #f4f4f5);
    padding: 0.8rem 1rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    border-radius: 5px;

    &::after {
      position: absolute;
      top: -16px;
      left: 1rem;
      width: 30px;
      height: 16px;
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
      content: "";
      background-color: var(--c-secondary, #f4f4f5);
    }
  }
}

吹き出し風のアコーディオン

同じ「アコーディオン」カテゴリーのUIパーツ

三角形アイコン + 枠線付きのアコーディオン

三角形アイコン + 背景色付きのアコーディオン

三角形アイコン + 下線付きのアコーディオン

Other CSS UI parts

アコーディオン

バルーン

ボックス

パンくずリスト

ボタン

チェックボックス

見出し・文字

アイコン

リスト

ページネーション

引用

続きを読む

検索フォーム

セレクトボックス

スイッチボタン

タブ

テキストボックス

ツールチップ

Stack(縦・横方向)レイアウト

標準レイアウト

ヘッダー