html+css写三角形

悠悠 2022-05-09 03:06 194阅读 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 条评论，194人围观）

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

相关阅读

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

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

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

相关 HTMLCSS学习笔记（二十三）GRID布局

GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的

拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 96 阅读

相关用css写三角形

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

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

相关 css写一个三角形

昨天面试了一个听起来很简单的问题，但是真的很久没有用到了，所以我都搞忘记了如何实现，哎，万万不可忘记很多基础的东西啊，说不定哪天就遇到了！。。 <div class=

川长思鸟来/ 2023年07月12日 14:51/ 0 赞/ 33 阅读

相关 border写一个直角三角形

border的四条边是平分的。你可以放大试试 .box1 { width: 0;height: 0;

小咪咪/ 2023年06月05日 08:08/ 0 赞/ 33 阅读

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

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

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

相关用css写个三角形

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

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

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

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

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

相关 html+css写三角形

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

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

相关 javascrip用零星写三角形

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

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