html+css写三角形

悠悠 2022-05-09 03:06 133阅读 0赞

首先我们来看下面一段代码在页面中的效果图：

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>三角形</title>
    		<style>
    			.triangle{
    				width: 0;
    				height: 0;
    				border: 300px solid red;
    				border-top-color: black;
    				border-bottom-color: yellow;
    				border-left-color: green;
    				border-right-color: blue;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="triangle"></div>
    	</body>
    
    </html>

效果图：

![70][]

看到这个效果图，我们就大概知道三角形怎么写了，我们可以将border-bottom设为none这样方块的下半边就没有了

border-bottom: none;

效果图：

![70 1][]

然后我们在将border-left 和 border-right的颜色设为透明，这样就只剩border-top了

## 完整代码： ##

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>三角形</title>
    		<style>
    			.triangle{
    				width: 0;
    				height: 0;
    				border: 100px solid transparent;
    				border-top-color: black;
    				border-bottom: none;
    				border-left-color: transparent;
    				border-right-color: transparent;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="triangle"></div>
    	</body>
    
    </html>

效果图：

![70 2][]

[70]: /images/20220509/6f76489ed4774fd68b95cc597b1a700c.png
[70 1]: /images/20220509/d371a28c661c4a48b282dfb70731dd5a.png
[70 2]: /images/20220509/d5e8839dc3df474895cd30dd8d5dc678.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么用css写出来一个三角形

使用CSS绘制三角形的方法之一是使用"border"属性。例如：div \{ width: 0; height: 0; border-left: 20px solid tra

我就是我/ 2024年03月25日 17:43/ 0 赞/ 50 阅读

相关用css写三角形

转自 [ http://bbs.blueidea.com/thread-2818535-1-1.html][http_bbs.blueidea.com_thread-28185

傷城~/ 2023年08月17日 16:20/ 0 赞/ 75 阅读

相关音乐社交类登录注册htmlcss3+html5模板

[下载地址][Link 1] 一款通用的社交平台网站登录注册表单切换页面模板。支持手机验证码，图片验证码，第三方登录等功能。 ![8832d92220fd03c4fcef1

超、凢脫俗/ 2022年09月14日 00:27/ 0 赞/ 200 阅读

相关纯CSS写三角形-border法[基础篇]

注意：所有知识点将不考虑IE6 (￣▽￣") ![3A676FA4C53DC5CF3E5F36D28E4B28E3_B800_2400_217_86.PNG][] 在

不念不忘少年蓝@/ 2022年08月10日 17:42/ 0 赞/ 134 阅读

相关三角形

![Center][] · 这种题只记规律，不求推导！a\[i\]=a\[i-1\]+6\(i-1); include<stdio.h> int

深藏阁楼爱情的钟/ 2022年08月05日 13:06/ 0 赞/ 160 阅读

相关三角形

![20160406155010732][] 博客首发，重在体验 include<stdio.h> int main() { double

爱被打了一巴掌/ 2022年07月26日 04:07/ 0 赞/ 159 阅读

相关用css写个三角形

在百度前端学院任务重遇到了这个，之前也接触过，在这里写一下吧。 ![这里写图片描述][SouthEast] 就是上面这个三角形。我是这样写的 div{

痛定思痛。/ 2022年06月18日 08:46/ 0 赞/ 156 阅读

相关 HTML+CSS写一个三角形（原理+实例）

写之前，首先要了解其中的原理 html代码只需创建两个名为triangle、triangle-left的div盒子即可，代码： <body>

怼烎@/ 2022年06月05日 03:58/ 0 赞/ 165 阅读

相关 html+css写三角形

首先我们来看下面一段代码在页面中的效果图： <!doctype html> <html> <head> <meta chars

悠悠/ 2022年05月09日 03:06/ 0 赞/ 134 阅读

相关 javascrip用零星写三角形

for(var i = 0;i<8;i ++){ for(var j=0;j<8; j++){ //

灰太狼/ 2021年12月04日 00:23/ 0 赞/ 181 阅读