Posted on | by liu
大家知道，CSS能够通过样式表来控制HTML文档的样式。而其中比较常见的样式之一，就是形状。在这里，大家将学习如何使用CSS制作两个不同形状的图形：直角三角形和等边三角形。
首先，大家来看如何制作一个直角三角形。要制作一个直角三角形，大家需要使一个元素拥有三个边，其中两条是等长的，而且相互垂直。这样，第三边长度就由前面的两条边来决定。为了将第三边制成直角，大家可以对其进行旋转。
通过CSS的transform属性来实现旋转。大家可以使用下面的代码来制作一个直角三角形。
.triangle {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
transform: rotate(45deg);
}在这个代码中，大家首先将元素的宽度和高度设置为0，同时设置了一个50像素高的红色边框。接下来，大家指定这个边框是由上边框和右边框组成的。由于右边框是透明的，所以大家只能看到上边框。最后，大家通过transform属性将整个元素旋转了45度，这样就得到了一个直角三角形。
接下来，大家来看一下如何制作一个等边三角形。要制作一个等边三角形，大家只需要将一个正方形旋转45度。然后，取这个正方形的对角线上的两个点，这两个点之间就是一个等边三角形了。
下面是一个示例代码：
.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
transform: rotate(45deg);
}在这个代码中，大家同样将宽度和高度设置为0，拥有一个50像素高的红色边框。然后大家使用border属性来指定边框的宽度和颜色，但其中除了底边为红色外，其他三条边都设置为透明。最后，大家旋转整个元素角度45度即为等边三角形。
以上就是怎样使用CSS制作两个不同形状的图形的全部过程。希望对大家有所帮助！