领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

纯Css通过改变border制作出各种三角图形

nixiaole 2024-11-24 20:02:56 知识剖析 24 ℃

1.基本的三角样式:


2.改变border-width属性

3.改变border-style属性

1)dotted


2)dashed


3)solid


4)double


5)groove


6)ridge


7)inset


8)outset


4.改变border-color属性

1)border-color: transparent yellow blue green;


2)border-color: red transparent blue green;


3)border-color: red yellow transparent green;


4)border-color: red yellow blue transparent ;


5.结尾

通过border制作三角形,只需要保证一边的边框是有色的,其他边框色为透明色,这样就很容易制作出三角形。




Tags:

最近发表
标签列表