css6边形技巧 |css特效登录页面样式

. triangle{
width: 0;
height: 0;
border-top: 50px solid #007bff;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}

上面的代码是如何用CSS6边形技巧来创建一个三角形的例子。上面的代码使用三个边框让该元素看起来像一个三角形。大家首先设置该元素的宽高为0，然后设置它的边框，将上边框设置成一个较大的值，并将左右两个边框设置成透明。这样，大家就成功地创建了一个三角形形状的元素。

CSS6边形技巧还可以用来创建四边形，五边形以及通用的多边形形状。以下是创建一个四边形的代码:

. quadrilateral {
width: 100px;
height: 100px;
transform-origin: 0 0;
transform: skew(-45deg);
background-color: #007bff;
}

上面的代码使用CSS的 transform 属性来创建一个斜形，最终得到了一个四边形。大家首先设置元素的宽和高，然后使用 transform: skew() 来使该元素成为一个斜形。大家还可以使用类似的方式创建五边形，六边形等等的形状。

CSS6边形技巧还可以用来创建圆形类似的形状，以下是一个使用 CSS6 边形技巧创建圆形的代码:

. circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #007bff;
}

上面的代码将元素的宽和高设置成相同的值，并将边框半径设置成50%。这样就可以将元素变成一个圆形了。

在结束这篇文章之前，大家需要注意的是：CSS6边形技巧可以在许多各种不同的地方使用，以创建丰富、复杂的设计元素。如果你想要创建更复杂的形状，可以尝试组合不同形状的元素，使用层叠布局，或者使用其他的CSS属性和技术来完成更多的设计效果。