css写一个三角形

川长思鸟来 2023-07-12 14:51 13阅读 0赞

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

<div class="triangle"></div>
    <style>
    	.triangle{ 
    	width:0;
    	height:0;
    	border-top:60px solid blue;
    	border-bottom:60px solid red;
    	border-left:60px solid yellow;
    	border-right:60px solid green;
    }
    </style>

![四个角][20200309145345144.png]

<div class="triangle"></div>
    <style>
    .triangle{ 
    	width:0;
    	height:0;
    	border-top:60px solid transparent;
    	border-bottom:60px solid red;
    	border-left:60px solid transparent;
    	border-right:60px solid transparent;
    }	
    </style>

![在这里插入图片描述][20200309145745276.png]

<div class="triangle"></div>
    <style>
     .triangle{ 
      	height:0px;
    	width:0px;
    	border-top:solid 100px rgb(55, 0, 255);
    	border-left:solid 100px rgb(128, 0, 79);
    }
    </style>

![在这里插入图片描述][2020030914584954.png]

<div class="triangle"></div>
    <style>
    .triangle{ 
    	height:0px;
    	width:0px;
    	border-top:solid 100px transparent;
    	border-left:solid 100px rgb(55, 0, 255);
    }
    </style>

![在这里插入图片描述][20200309150236778.png]

[20200309145345144.png]: https://img-blog.csdnimg.cn/20200309145345144.png
[20200309145745276.png]: https://img-blog.csdnimg.cn/20200309145745276.png
[2020030914584954.png]: https://img-blog.csdnimg.cn/2020030914584954.png
[20200309150236778.png]: https://img-blog.csdnimg.cn/20200309150236778.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关用css写三角形

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

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

相关 css写一个三角形

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

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

相关 border写一个直角三角形

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

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

相关 CSS绘制一个三角形

目录等腰梯形普通三角形（等腰三角形）等边三角形平行四边形 -------------------- 我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或

墨蓝/ 2023年01月04日 11:49/ 0 赞/ 296 阅读

相关如何用CSS 画一个三角形？

这里新创建了一个专题，为自己之后的跳槽做准备，每天给自己一个小时的时间去看网上的一些面试题，并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记，记录下来。尤其

怼烎@/ 2022年12月24日 06:54/ 0 赞/ 256 阅读

相关 CSS做一个三角形

<head> <style> / 三角形制作的原理 / / 先设置一个没有宽高的盒子，然后设置他的边框 / .one { width: 0; hei

ゝ一世哀愁。/ 2022年12月09日 01:50/ 0 赞/ 216 阅读

相关用css写个三角形

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

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

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

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

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

相关 html+css写三角形

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

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