美文网首页前端攻城狮
利用CSS画三角形原理

利用CSS画三角形原理

作者: iam梦的的 | 来源:发表于2017-04-23 16:59 被阅读0次

下面介绍CSS画三角形的原理

一、首先画一个div,给它宽高和背景颜色。再加上四条边的边框。

二、div的width、height置零,看看效果。(注意,这里把div的背景颜色也去掉。因为背景颜色是扩展到边框的,如果不去掉背景颜色,那么下面背景颜色会显示在透明的边框上。)

三、下面把左、右边框变成透明

四、去掉下边框。下面是等腰三角形

CSS三角形原理是:元素高度宽度为0,且没有下边框,左右边框透明即可。

要想画直角三角形。直接去掉右边框即可。

参考文献:

https://www.zhihu.com/question/35180018

相关文章

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • 利用CSS画三角形原理

    下面介绍CSS画三角形的原理 一、首先画一个div,给它宽高和背景颜色。再加上四条边的边框。 二、div的widt...

  • CSS画三角形/梯形

    用css画三角形或者梯形等图片主要是利用css中的border属性 正方形 ==>为一个div设置如下样式.tri...

  • CSS三角形绘制

    一、css画各种三角形的原理 1、基础原理 当div宽度为0,高度为0的时候,只设置border的大小和四边不同颜...

  • CSS画三角形、圆形、椭圆形总结

    CSS画正方形长方形很简单,本文就不说了。 一、三角形 1、CSS画等腰三角形 2、画直角三角形: 二、画圆形 注...

  • CSS画三角形

    一直以来每次用到画三角形的时候总需要去百度一下才能写得出来,今天再次把css画三角形的原理学习了一遍,相信以后再也...

  • css画三角形

    最近看到一个css画三角形的方法,非常有趣。 直接贴代码 感兴趣的同学可以深入探究原理,效果如下图:

  • CSS画三角形,箭头

    1. border   css画三角形主要是利用border属性。首先看一下width与height为0情况下的b...

  • 纯css绘制三角形

    利用css的border属性可以方便的绘制出三角形;

  • CSS制作三角形等指示标

    利用css的背景叠加 三角形的down 三角形的up *{ margin:0; padding:0; } ul{ ...

网友评论

    本文标题:利用CSS画三角形原理

    本文链接:https://www.haomeiwen.com/subject/soydzttx.html