[分享]css不规则图形加边框

我们在网页设计中，经常需要使用各种各样的不规则图形来进行页面美化。而CSS是我们最常用的一种样式语言，它可以用来快速、简单地实现各种复杂的效果。在本篇文章中，我们将会介绍如何使用CSS实现不规则图形，...

我们在网页设计中，经常需要使用各种各样的不规则图形来进行页面美化。而CSS是我们最常用的一种样式语言，它可以用来快速、简单地实现各种复杂的效果。在本篇文章中，我们将会介绍如何使用CSS实现不规则图形，并且加上边框效果。

.rough-shape {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transform: rotate(45deg);
  overflow: hidden;
}

.rough-shape:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top right,purple,transparent);
  transform: rotate(-45deg);
}

.rough-shape:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom left,pink,transparent);
  transform: rotate(-45deg);
  z-index: -1;
}

.rough-shape .content {
  position: relative;
  z-index: 1;
}

.rough-shape:before,
.rough-shape:after {
  border: 5px solid #fff;
  box-sizing: border-box;
} 

我们首先创建一个div元素，并设置它的class为rough-shape。接下来，我们为这个div添加CSS样式。其中，我们将div设置为相对定位，并设置它的宽度和高度为200px，背景色为灰色。然后，我们使用transform:rotate(45deg)将div旋转45度，使其呈现出一个菱形。我们还添加了overflow:hidden来隐藏菱形的四个角。

接下来，我们将使用:before和:after伪元素，来为这个菱形添加上部分的三角形和下部分的三角形。我们使用linear-gradient来实现渐变效果，并将它们旋转-45度，使它们呈现出一个菱形的样子。

最后，我们为菱形的伪元素和.content元素添加上边框，即可实现带有边框的不规则图形。