[分享]css3各种折角效果

CSS3中有很多种能够实现折角效果的样式属性，以下我们来一一介绍:

/* 第一种方式：使用 border 属性 */

.box1 {
  width: 100px;
  height: 100px;
  border-top: 50px solid #f00;
  border-right: 50px solid #f00;
}

/* 第二种方式：使用 transform 属性 */

.box2 {
  width: 100px;
  height: 100px;
  transform: skew(45deg);
}

.box2::before {
  content: ';
  display: block;
  width: 100%;
  height: 100%;
  background: #f00;
  transform: skew(-45deg) translateX(-50%);
}

/* 第三种方式：使用 clip-path 属性 */

.box3 {
  width: 150px;
  height: 150px;
  clip-path: polygon(50% 0, 100% 50%, 50% 99%, 0 50%);
  background: #f00;
}

/* 第四种方式：使用 border-radius 属性 */

.box4 {
  width: 100px;
  height: 100px;
  border-radius: 50% / 100%;
  background: #f00;
}

/* 第五种方式：使用伪类和 transform 属性 */

.box5 {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.box5::before {
  content: ';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  transform: rotate(45deg);
  background: #f00;
} 

以上就是 CSS3 中实现折角效果的各种方式，可以根据具体需求选择合适的方式进行实现。