如何使用HTML+CSS画三角形

今天又有小姐姐在群里问css是如何画出三角形的，让我想起一开始在学校学HTML+CSS的时候，觉得学这些标签样式很无趣，认为不过是一些文字+图片，直到偶然在慕课网上面看了一个视频=>重拾CSS的乐趣，才对CSS3的美妙之处有了一些体会。
CSS画三角形我之前也有研究过，但是记忆总是不深刻，再次用到时，仍然需要找资料，今天加深一下印象，希望以后再用到的时候，可以从脑子里面一下子拿出来，666。

 /* 等腰三角形（箭头朝上）； */#div1{width: 0;height: 0;border-bottom: 100px solid cyan;border-left: 50px solid transparent;border-right: 50px solid transparent;}

/* 等腰三角形（箭头朝下）； */#div2{width: 0;height: 0;border-top: 100px solid cyan;border-left: 50px solid transparent;border-right: 50px solid transparent;}

 /* 等腰三角形（箭头朝左）； */#div3{width: 0;height: 0;border-right: 100px solid cyan;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

 /* 等腰三角形（箭头朝右）； */#div4{width: 0;height: 0;border-left: 100px solid cyan;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

  /* 直角三角形（箭头左上）； */#div5{width: 0;height: 0;border: 50px solid gray;border-right: 50px solid transparent;border-bottom: 50px solid transparent;}

/* 直角三角形（箭头右下）； */#div6{width: 0;height: 0;border: 50px solid lightblue;border-left: 50px solid transparent;border-top: 50px solid transparent;}

寄几敲出来了，以后应该不会忘了,开森。

如何使用HTML+CSS画三角形相关推荐

css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形想要使用css画三角形,首先需要定义一个没有宽度 ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用「border」属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...
splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...

如何使用HTML+CSS画三角形

如何使用HTML+CSS画三角形相关推荐

最新文章

热门文章