css三角形外框代码

CSS是前端开发中不可或缺的一部分，它可以实现各种各样的效果，其中三角形外框效果就是非常实用的一个，在此我们分享一下相关代码。

/*先定义一个div元素*/
div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid red;
  border-bottom: 50px solid transparent;
  /*或者使用下面这种方式，定义一个空白情况*/
  /*border-top: 50px solid white;*/
  /*border-left: 50px solid white;*/
  /*border-bottom: 50px solid white;*/
  /*border-right: 50px solid white;*/
}

/*如果要实现四个角不同的效果，代码如下*/
.angled-box {
  display: inline-block;
  position: relative;
  padding: 25px;
  background-color: #fff;
  border-top: 5px solid #6bd6ff;
  border-right: 5px solid #6bd6ff;
  border-bottom: 5px solid #6bd6ff;
  border-left: 5px solid #6bd6ff;
}
.angled-box:before,
.angled-box:after {
  content: "";
  display: block;
  position: absolute;
  border: 5px solid transparent;
}
/* 左上角 */
.angled-box:before {
  top: 0;
  left: 0;
  border-top-color: #ff3284;
  border-left-color: #ff3284;
}
/* 右上角 */
.angled-box:after {
  top: 0;
  right: 0;
  border-top-color: #ff3284;
  border-right-color: #ff3284;
}
/* 左下角 */
.angled-box:after {
  bottom: 0;
  left: 0;
  border-bottom-color: #ff3284;
  border-left-color: #ff3284;
}
/* 右下角 */
.angled-box:before {
  bottom: 0;
  right: 0;
  border-bottom-color: #ff3284;
  border-right-color: #ff3284;
} 

在此，我们提供了两种不同的三角形外框实现方式，希望对需要的同学们有所帮助。