css制作五边形

2024-10-14 02:45:55

1、新建一个html文件。如图：

3、设置css样式，创建一个三角型。如图：三角形制作原理：1.设置div标签的宽、高设置为0；2.设置di即枢潋雳v标签边框的宽，这个宽就是三角形的高；3.设置div标签的背景颜色，然后把其他背景颜色设置为透明。样式代码：<style type="text/css"> #pentagon { margin:100px auto; position: relative; height: 0; width: 0; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 100px solid red; } </style>

5、使用伪类:after为div设置一个梯形。如图：梯形设置原理：1.为div设置一个宽度；2.设置边框的宽度；3.给一条边框设置颜色，其他边框都是透明；代码：#pentagon:before { content: ""; position: absolute; top: 100px; left: -120px; width: 140px; border-width: 120px 50px 0 50px; border-style: solid; border-color: red transparent transparent transparent; }

7、所有代码。如有不明白可以把所有代码直接复制到html文件，保存后运行即可看到效果。所有代码：<!DOCTYPE html><htm造婷用痃l><head><meta charset="UTF-8"><title>五边形</title><style type="text/css">#pentagon {margin:100px auto; position: relative;height: 0;width: 0;border-left: 120px solid transparent;border-right: 120px solid transparent;border-bottom: 100px solid red;}#pentagon:before {content: "";position: absolute;top: 100px;left: -120px;width: 140px;border-width: 120px 50px 0 50px;border-style: solid;border-color: red transparent transparent transparent;} </style></head><body><div id="pentagon"></div></body></html>