纯CSS如何绘制三角形

文章2022-05-1478 人已阅来源：网络

CSS绘制三角形的方法：1、定义个宽高为0的标签元素；2、使用“border-方向:边框宽度 solid 边框颜色”定义三角形的底边；3、剩下的三边用透明边框设置即可。

纯CSS如何绘制三角形

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

三角形实现原理：

宽度（width）为0；高度（height）为0；
有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

一、向上

纯CSS如何绘制三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

二、向下

纯CSS如何绘制三角形

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

以上就是纯CSS如何绘制三角形的详细内容！

相关内容

纯css实现小箭头或三角形标志
作为一名前端工程师，工作中免不了要使用css制作一些小箭头、三角形之类的标志。下面我就来为大家分享下纯css制作小箭头、三角形等标志的方法。实现小箭头：.arrow{width...
css如何做三角形
css做三角形的方法：首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框...
利用CSS绘制三角形的6种技巧（分享）
本篇文章给大家介绍一下利用CSS绘制三角形的N种技巧。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在一些面经中，经常能看到有关CSS的题目都会有一道如何使用...
css常见问题：如何画多边形（三角形~六边形）
利用纯CSS如何画多边形？本篇文章就来给大家介绍一下从纯CSS画三角形开始，介绍一下画四边形、五边形、六边形的方法，更高的实现方式也可以此类推画出来，希望对大家有所帮助！今天要...
css怎么实现三角形
实现方法：1、利用高宽为零的容器和透明的border；2、利用线性渐变linear-gradient；3、使用“transform:rotate”配合“overflow:hid...
css怎么控制按钮不可用
方法：给按钮元素添加“pointer-events:none;”样式来让按钮元素永远不会成为鼠标事件的target，让其点击事件失效，即可控制按钮不可用。本教程操作环境：win...
css如何设置一行字显示不完隐藏
css中可利用overflow属性来设置一行字显示不完就隐藏；只需给文字的盒子元素添加“overflow:hidden;”样式，设置当内容溢出元素框时，将文字内容修剪，且溢出部...
CSS外链式与内联式的区别是什么
区别：CSS外链式是将css代码单独写一个以“.css”为扩展名的文件中，然后使用link标签链接到html中。CSS内联式是直接使用style属性将css代码写在HTML标签...
css有继承关系吗
css有继承关系。CSS继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代；也就是说：设置了上级（父级）的CSS样式，上级（父级）及以下的子级（下级...
浅谈使用CSS实现半透明边框和多重边框效果的方法
本篇文章分两种场景给大家介绍一下CSS实现半透明边框与多重边框效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。（学习视频分享：css视频教程）场景一：实现...

浏览更多有关 css 三角形的内容