CSS3是一个强大的样式表语言,它可以用来创建各种各样的效果。其中,组合图形是一种非常有趣的效果,可以将多种形状组合在一起,形成新的图形。接下来我们来介绍一些常见的CSS3组合图形。
.circle { width: 200px; height: 200px; border-radius: 50%; background: green; } .square { width: 200px; height: 200px; background: yellow; } .triangle { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; border-left: 100px solid transparent; } .circle-square { display: inline-block; } .circle-triangle { display: inline-block; position: relative; top: -100px; } .square-triangle { display: inline-block; transform: rotate(45deg); }
以上是一些常用的基础图形的CSS样式。我们用这些基础图形可以组合出新的图形,比如下面这三个组合图形。
第一个组合图形是圆形和正方形组合而成的,使用了两个基础图形中的属性border-radius和display: inline-block。第二个组合图形是圆形和三角形组合而成的,使用了基础图形中的border和position属性。第三个组合图形是正方形和三角形组合而成的,使用了基础图形中的transform属性。
通过CSS3组合图形,我们可以轻松地创建出各种各样的有趣效果,为网页添加更多的色彩和乐趣。