CSS圆角矩形，魔法不只一种！

前言

在CSS的学习过程中，我们总会遇到这样一个熟悉的问题：如何绘制一个圆角矩形？最普遍的方法是使用CSS的border-radius属性，border-radius属性可以通过四个值来分别控制一个元素的左上角、右上角、右下角和左下角的圆角半径。但是，除了使用border-radius属性之外，还有一些其他的方法可以帮助我们绘制圆角矩形和平行四边形。

纯CSS绘制圆角矩形

方法一：使用border-radius属性

border-radius属性是最简单也是最常用的方法来绘制圆角矩形。border-radius属性可以接收四个值，分别控制元素的左上角、右上角、右下角和左下角的圆角半径。

.rounded-rectangle {
  border-radius: 10px;
}

上述代码将创建一个边框半径为10像素的圆角矩形。

方法二：使用border-image属性

border-image属性可以用来设置元素的边框图像。通过使用border-image属性，我们可以将一张图片作为元素的边框，从而实现圆角矩形的绘制。

.rounded-rectangle {
  border-image: url("rounded-rectangle.png") 10 round;
}

上述代码将使用rounded-rectangle.png图片作为元素的边框，并将其圆角半径设置为10像素。

方法三：使用mask属性

mask属性可以用来设置元素的遮罩图像。通过使用mask属性，我们可以将一张图片作为元素的遮罩，从而实现圆角矩形的绘制。

.rounded-rectangle {
  mask: url("rounded-rectangle.png");
}

上述代码将使用rounded-rectangle.png图片作为元素的遮罩，从而实现圆角矩形的绘制。

纯CSS绘制平行四边形

方法一：使用transform属性

transform属性可以用来对元素进行变换。通过使用transform属性，我们可以将一个元素旋转一定角度，从而实现平行四边形的绘制。

.parallelogram {
  transform: skew(20deg);
}

上述代码将创建一个倾斜20度的平行四边形。

方法二：使用clip-path属性

clip-path属性可以用来设置元素的裁剪路径。通过使用clip-path属性，我们可以将一个元素裁剪成任意形状，从而实现平行四边形的绘制。

.parallelogram {
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

上述代码将创建一个平行四边形，其顶点位于(0, 0)、(100%, 0)、(75%, 100%)和(0, 100%)。

结语

在本文中，我们介绍了使用CSS绘制圆角矩形和平行四边形的几种方法。这些方法各有优缺点，我们可以根据自己的需要选择合适的方法。