css习题（如何用html和css画三角形（等腰和直角））
css习题（如何用html和css画三角形（等腰和直角））
用HTML语言和css语言画一个等腰三角形和一个直角三角形
以下是HTML页面的代码：
<html><head><meta charst=utf-8> <title>中国的流浪猫</title><link rel=&#
css习题（如何用html和css画三角形（等腰和直角））
用HTML语言和css语言画一个等腰三角形和一个直角三角形
以下是HTML页面的代码：
<html><head><meta charst=utf-8> <title>中国的流浪猫</title><link rel=stylesheet type=text/css href=></head><body><div class=wapper></div></body>
</html>
以下是css页面的代码：
这是画等腰三角形的第一个方法
*{margin: 0;padding: 0;
}
.wapper{width: 0;height: 0;border: 100px solid red;border-bottom-color: black;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;
}这是画等腰三角形的第二个方法
.wapper{width: 0;border-right: 200px solid #fff;border-top: 200px solid #fff;border-left: 200px solid #fff;border-bottom: 200px solid red;
}
这是画等腰三角形的第三个方法（最简的代码）
.wappper {width: 0;border: 100px solid transparent;border-top-color: red;}
这是画一个直角等腰三角形的css代码：
<!DOCTYPE html>
<html lang=zh-C><head><meta charset=UTF-8><meta name=viewport content=width=device-width, initial-scale=1.0><title>中国的流浪猫</title><style>div {width: 0;border: 200px solid transparent;border-top-color: red;border-left: none;border-bottom: none;}</style>
</head><body><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><style>body {background-color: #ccc;}div {margin: 100px auto;width: 0;height: 0;border-width: 0 0 150px 50px;border-style: solid;border-color: transparent transparent red transparent;}</style>
</head><body><div></div>
</body></html>
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2024-02-10 12:16:16
下一篇：信息流内容理解技术
推荐阅读
| 留言与评论（共有 17 条评论） |
| 本站网友 新疆地震信息网 | 0秒前 发表 |
| 0;padding | |
| 本站网友 糖尿病原因 | 18分钟前 发表 |
| solid;border-color | |
| 本站网友 1段奶粉 | 20分钟前 发表 |
| 0;border-width | |
| 本站网友 长缨在手 | 12分钟前 发表 |
| 0;border-width | |
| 本站网友 南京社区 | 20分钟前 发表 |
| transparent transparent red transparent;}</style> </head><body><div></div> </body></html> | |
| 本站网友 修复毛孔粗大 | 3分钟前 发表 |
| 0;height | |
| 本站网友 嘎隆拉隧道 | 22分钟前 发表 |
| transparent;border-left-color | |
| 本站网友 鼻子综合整形 | 1分钟前 发表 |
| 0;height | |
| 本站网友 官司网 | 6分钟前 发表 |
| #ccc;}div {margin | |
| 本站网友 rar解压缩 | 11分钟前 发表 |
| 200px solid transparent;border-top-color | |
| 本站网友 济南银座奥特莱斯 | 25分钟前 发表 |
| transparent; } 这是画等腰三角形的第二个方法 .wapper{width | |
| 本站网友 谢长军 | 23分钟前 发表 |
| none;border-bottom | |
| 本站网友 原筑壹号房价 | 13分钟前 发表 |
| transparent; } 这是画等腰三角形的第二个方法 .wapper{width | |
| 本站网友 白细胞介素 | 6分钟前 发表 |
| 0;height | |
| 本站网友 最好的oa | 3分钟前 发表 |
| 0; } .wapper{width | |
| 本站网友 美女胸脯 | 0秒前 发表 |
| transparent;border-left-color | |