CSS 折叠角

CSS 折叠角是指一个HTML元素的角上具有一个小三角形的效果，类似一个标签页的效果。它通常用于显示折叠面板或隐藏的内容。

使用方法

HTML

首先，在HTML中需要添加一个具有类名的元素：

<div class="my-element">
  <h2 class="my-element__title">This is the title</h2>
  <div class="my-element__content">
    <p>This is the content of the element.</p>
  </div>
</div>

CSS

然后，在CSS文件中，我们需要为 .my-element 添加样式：

.my-element {
  position: relative;
  padding: 0.5em;
}

接下来，我们需要为 .my-element__title 添加样式以创建折叠角：

.my-element__title {
  position: relative;
  padding-right: 1em;
  line-height: 1.5;
  cursor: pointer;
}

接下来，我们需要为 .my-element__title::after 添加样式以创建折叠角：

.my-element__title::after {
  content: "";
  position: absolute;
  top: 0.5em;
  right: 0;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent #000;
}

最后，我们需要设置 .my-element__content 的初始状态：

.my-element__content {
  display: none;
}

我们可以使用JavaScript来切换 .my-element__content 的显示和隐藏状态。

总结

CSS 折叠角是一个非常简单，但常用的效果，它可以为网页增加交互性和可用性。我们只需要使用位置、边框、内容和颜色等属性配合，就可以创建自己的折叠角了。

我们可以用下面的代码块来测试这个效果：

<div class="my-element">
  <h2 class="my-element__title">This is the title</h2>
  <div class="my-element__content">
    <p>This is the content of the element.</p>
  </div>
</div>

<script>
  var element = document.querySelector(".my-element__title");

  element.addEventListener("click", function() {
    var content = element.nextElementSibling;
    content.style.display = content.style.display === "none" ? "block" : "none";
  });
</script>