用css制作三角，和多边形，练练手
程序员文章站
2022-06-22 20:34:49
三角形这里三角用法比较多：自己总结了一个口诀：等腰三角：相对角色 直角三角形：更改左右大小即可掌握三角形制作即可制作其他三角形状从代码可以看出上边为 0px 上边对应底边颜色为红色其他边的颜色为透明色 其他边的大小为150px
三角形
这里三角用法比较多：
自己总结了一个口诀：
等腰三角：相对角色
直角三角形：更改左右大小即可掌握三角形制作即可制作其他三角形状
- 从代码可以看出上边为 0px
- 上边对应底边颜色为红色
- 其他边的颜色为透明色 其他边的大小为150px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>等腰三角</title>
</head>
<body>
<style>
div {
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 150px 150px;
/* 上 右 下 左 */
border-color: transparent transparent red transparent;
}
</style>
<div></div>
</body>
</html>
这里就直接再制作一个八边形其他都是一个道理
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>八边形</title>
</head>
<body>
<style>
div {
width: 100px;
height: 0;
border-width: 0 71px 71px;
border-style: solid;
border-color: transparent transparent pink;
position: relative;
}
div::after {
position: absolute;
top: 70px;
left: -70px;
content: "";
width: 242px;
height: 0;
border-style: solid;
border-width: 0px 0 94px;
border-color: pink;
}
div::before {
position: absolute;
top: 164px;
left: -70px;
content: "";
width: 100px;
border-style: solid;
border-width: 71px 71px 0;
border-color: pink transparent transparent;
}
</style>
<div></div>
</body>
</html>
本文地址：https://blog.csdn.net/youknow156/article/details/107304364
上一篇： 如何加强中小企业的整体安全性