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

在网页设计中，不规则图形的运用可以为网页带来更加生动、有趣的视觉效果。今天我们就介绍一种使用CSS来创建不规则图形并给其加上边框的方法。 首先，我们需要创建一个带有不规则形状的div元素。在这里我们可...

在网页设计中，不规则图形的运用可以为网页带来更加生动、有趣的视觉效果。今天我们就介绍一种使用CSS来创建不规则图形并给其加上边框的方法。
首先，我们需要创建一个带有不规则形状的div元素。在这里我们可以使用CSS3的clip-path属性。clip-path属性的值可以是多个形状的组合，每个形状之间使用逗号分隔。下面是一个示例代码：

div{
  width: 200px;
  height: 200px;
  background-color: #eee;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 70% 100%, 0 100%, 0 20%);
} 

以上代码中，我们创建了一个200px × 200px的div元素，使用了polygon函数来定义了一个不规则形状。其中，polygon函数的参数为各个点的坐标，每对坐标表示一个点的位置。在这里我们只需要知道这些坐标组成了一个有趣的不规则形状即可。
接下来，我们需要给这个不规则图形加上边框。同样地，我们可以使用CSS3的border-image属性来实现。border-image属性需要指定一个图片作为边框。我们可以将png图片的透明部分作为边框的装饰部分，将边框的大小和形状与不规则图形进行匹配，就可以让边框与图形完美地融合在一起。
以下是一个添加边框的示例代码：

div{
  width: 200px;
  height: 200px;
  background-color: #eee;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 70% 100%, 0 100%, 0 20%);
  border-image: url(border.png) 40 40 round;
} 

以上代码中，我们使用一张名为border.png的图片作为边框，边框的宽度为40px，四个角的形状为round。在实际使用中，我们需要根据不同的图形形状和边框效果进行调整。
以上就是使用CSS创建不规则图形并加边框的方法。希望这些技巧能够为你的网页设计带来不一样的效果。