css绘制不规则三角形

css绘制不规则三角形

css绘制不规则三角形原理:

一个盒子包括: margin+border+padding+content上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。调整宽度大小可以调节三角形形状。

(相关课程推荐:css视频教程

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

Snipaste_2019-12-19_16-44-26.jpg

不规则三角形:

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:58px 22px 4px 26px;
}

Snipaste_2019-12-19_16-45-57.jpg

保留其中一种颜色, 就可以得到斜边在对角线上的三角形了,多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形。

Snipaste_2019-12-19_16-42-59.jpg

Image placeholder
前端答疑
未设置
  37人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么做直角三角形

css怎么做直角三角形一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

算法题:三角形的最小路径和

题目来源于力扣 理论基础 动态规划 三角形的最小路径和题目描述 给定一个三角形,找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。说明:如果你可以只使用O(n)的额外空间(n为三角形的

通过html5中的canvas来绘制一个圆环形进度条

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: 1 这个文档标识要

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css的语法规则是什么?

css的语法规则是什么?1、CSS规则由两个主要的部分构成:选择器,以及一条或多条声明:选择器{ 声明1; 声明2; 声明3; ...... }(推荐学习:CSS视频教程)2、CSS样式申明——At-

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

100%数据可用性承诺 VSP 5000系列如何改变存储行业规则

上个月,HitachiVantara在于拉斯维加斯举行的NEXT2019大会上,发布了其最新的企业级高端存储系统VSP5000系列产品。通过这款全面提升的企业级闪存阵列,致力于提供业界领先的性能和弹性

Java内存模型与Hppens-Before规则

为什么要有Java内存模型?并发编程的3个源头问题分别是: 可见性,由缓存导致的可见性问题 有序性,由编译优化导致的有序性问题 原子性,由线程切换导致的原子性问题 Java内存模型就是为了解决可见性和

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

wordpress无法加载css

wordpress无法加载css出现这种情况是因为wordpress安装时用http://localhost访问来安装,局域网访问时,加载css的路径不对,所以会出现css无法加载,只显示文字。解决方

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css语言难学吗?

CSS难学吗?css入门容易,想学深还是挺难的;学习css需要多加练习。CSS为什么难学CSS属性很多,难以一次性记下来CSS属性之间互相影响,难以完全掌握CSS核心概念都写在文档中,但是如果不熟悉一

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

dw如何使用css设置字体

dw如何使用css设置字体设置页面中的字体可以使用“页面属性”对话框,页面属性可以设置网页的字体、背景颜色和背景图像等样式。具体操作方法如下:1、选择“文件”>“页面属性”,或单击文本的属性检查器中的

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

css格式文件怎么打开

css格式文件怎么打开css文件可以使用系统自带的记事本打开,也可以使用专业的代码编辑器打开,如sublimetext、vscode、Dreamweaver。css文件是指css代码放到一个单独的文件