css三角边效果

CSS三角边效果是一种常见的网页设计技巧，它可以为网页内容添加精美的边框效果，使页面看起来更加美观。在CSS中，我们可以使用伪元素和CSS属性来实现这种边框效果。

/* 使用伪元素和CSS属性实现三角边效果 */

.triangle-box {
  position: relative;
  border: 2px solid #ccc;
  background-color: #fff;
}

.triangle-box::before, .triangle-box::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
}

.triangle-box::before {
  top: -2px;
  left: -2px;
  border-width: 0 20px 20px 0;
  border-right-color: #ccc;
}

.triangle-box::after {
  bottom: -2px;
  right: -2px;
  border-width: 20px 0 0 20px;
  border-top-color: #ccc;
} 

在上述代码中，我们首先创建了一个类名为triangle-box的容器元素，它具有相对定位和边框样式。然后，我们使用伪元素::before和::after创建三角边效果，设置它们的位置和边框样式，最后将它们放置到容器元素的边缘位置。通过这些CSS属性和元素的组合，我们实现了一个简单而美丽的三角边效果。