css画三角形原理

关键是你怎么理解border

<style>
    
div{
   width: 50px;
    height: 50px;
    border-top: 30px solid #000;
    border-right: 30px solid #ff0000;
    border-left: 30px solid #00ff00;
    border-bottom: 30px solid #0000ff;
}
</style>

<div>
</div>

结果如图。为啥结果是这样的呢?边角为啥是各占一半颜色呢?这样公平!


image.png

去掉对border-bottom的设置结果如下

image.png

不去掉bottom但设置宽度为0

image.png

设置宽度和高度都为0

image.png

那么怎么画三角?
显然,设置其中三个颜色为透明就可以了

<style>
    
div{
   width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 30px solid #0000ff;

}
</style>

<div>
</div>

结果

image.png

本质上是一个border如何处理交界处的问题

推荐阅读更多精彩内容

  • 使用纯CSS画三角形,记得去年自己就碰到过。但是当时只是一味的在网上粘贴复制了写代码,并没有深究其原理。今天特地写...
    angryyan阅读 9,149评论 1 8
  • 下面介绍CSS画三角形的原理 一、首先画一个div,给它宽高和背景颜色。再加上四条边的边框。 二、div的widt...
    iam梦的的阅读 471评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 8,541评论 0 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,865评论 1 91
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,234评论 0 2
  • 尘香乱草风雨里,葱郁埋心事。 凝眸色欲滴,展翅花非壁。 到何处寻一个你。
    陶然忘机阅读 70评论 0 0
  • 一方净土,养一寸赤子心。 生活带给我们的信息量太过庞大,一不小心脑袋就会被撑爆,哪里会有一方净土,哪里才能找回赤子之心!
    侯半生阅读 70评论 0 3
  • 【马 太 福 音11:28】凡劳苦担重担的人、可以到我这里来、我就使你们得安息。 曾经听过这样一个故事:一智者对他...
    高桥先生阅读 120评论 0 1
  • 1、函数的调用方式 既可以使用函数名+()的形式调用,也可以使用函数名+call()的形式调用; 两种调用方式的区...
    LorenaLu阅读 141评论 0 0