`

CSS画三角形

    博客分类:
  • CSS
CSS 
阅读更多

       最近做一个打气球小游戏,原理是原生JS操作DOM节点,最基础的页面样式涉及到css画三角形,有许多同学不太懂,所以这里系统总结下。

       我这里就用讲解下分解动作

       首先,是大家比较熟悉的带有边框的矩形

 

.border {  
  width:50px;  
  height:50px;  
  border: 2px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}  

     

 

    当我们增大border的值,

 

.border {  
  width:50px;  
  height:50px;  
  border: 20px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}  

 

    

     从上图可以很明显的发现每一边的边框是梯形

    

    现在试想一下,我们把元素的长和宽都设置为0px,边框的值不变,我们用极限的原理解释,每一边的边框将会由梯形变成三角形,下面我们用代码来试验一下。

 

.border {  
  width:0px;  
  height:0px;  
  border: 20px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}  

     我们得到如下结果:

   

     那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。比如

.border {  
  width:0px;  
  height:0px;  
  border: 20px solid;  
  border-color: #ADFF2F transparent transparent transparent;  
}  

  

    我们再回过头来看Bootstrap中.caret的源码。似乎和我们想象中的不一样,在设计向下三角形时,开发者只设置了左上右的边框值,然后将左右两边的边框的border-color设置为transparent。我们现在先把左右两边的border-color不设置为transparent,看看是怎么样的图形。

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
  border-left: 40px solid #FF0000;  
} 

 

      原来当不设置下边框时,左右的边框会把下半部分切掉。到这里我们应该能完全理解bootstrap的.caret代码的原理了。

    但是我们的探索并没有到此就结束,我们带着好奇心,测试如下代码:

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
}  

     我们只设置上右的边框,得到如下结果:

   似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。

.border {  
  width: 40px;   
  height:40px;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
}  

    

   原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。

   最有我们来看看,如果只设置元素对边的两条边框,看看会出现什么情况。

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-bottom: 40px solid #FF0000;  
}  

    浏览器什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.

  

 【常用场景】:提示框三角形(有边缘的)

如图:边缘三角形

原理:先画一个三角形,再画白色三角形的,调整几像素位置,覆盖掉一边

–> 这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css三角形</title>
    <style type="text/css">
        .triangle{
            margin: auto;
            margin-top: 50px;
            width: 200px;
            height: 100px;
            border: 1px solid green;
            position: relative;
        }
        .triangle:after{
            content: '';
            position: absolute;
            top: -20px;
            right: 10px;
            border: 10px solid transparent;
            border-bottom: 10px solid white;
            z-index: 20;
        }
        .triangle:before{
            content: '';
            position: absolute;
            top: -21px;
            right: 10px;
            border: 10px solid transparent;
            border-bottom: 10px solid green;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

 

 

 

 

 

 

.

     

 

分享到:
评论

相关推荐

    用css画三角形

    用纯css绘制三角形,不是用图片

    Css画三角形1

    在本例中,我们将探讨如何通过CSS来画出一个加粗边框的三角形。 首先,我们需要理解三角形的构造原理。一个基本的CSS三角形通常由一个具有非零边框的矩形元素构成,但通过设置相邻边框的宽度为0,可以使其塌陷成一...

    使用css画三角形的方法代码

    使用css画三角形的方法代码,大家参考使用吧,下面还有一个兼容IE6的代码

    css实现三角形及应用示例

    在CSS中,通过巧妙地利用边框、内边距和背景等属性,我们可以创建出各种几何形状,其中包括三角形。本篇文章将深入探讨如何用CSS实现三角形,并通过实例展示其在实际应用中的效果。 首先,我们要理解CSS创建三角形...

    css实现三角形.zip

    由于CSS无法直接画出几何形状,但它可以通过控制边框来间接创建三角形。关键在于设置边框宽度并隐藏不需要的部分,只显示形成三角形的边框。 1. **基本原理**: CSS三角形的基本原理是利用边框(border)和透明度...

    CSS绘制三角形的实现代码(border法)

    在本文中,我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论,通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。 首先,理解CSS边框的基本概念是关键。通常,...

    个性css3三角形设计师案例bootstrap模板_个性 灰色 三角形 css3 css3动画 设计 设计师 案例 展示 企业

    个性css3三角形设计师案例bootstrap模板_个性 灰色 三角形 css3 css3动画 设计 设计师 案例 展示 企业 个性css3三角形设计师案例bootstrap模板_个性 灰色 三角形 css3 css3动画 设计 设计师 案例 展示 企业

    纯CSS实现多彩三角形有序变化特效动画时尚背景墙.zip

    在本文中,我们将深入探讨如何使用纯CSS技术创建一个多彩三角形有序变化的特效动画背景墙,这是一种在现代网页设计中常用来增加视觉吸引力的方法。这个主题涉及到CSS3的多个重要特性,包括选择器、边框、渐变、动画...

    用CSS代码绘制三角形 纯CSS绘制三角形的代码

    用CSS画三角形 &lt;style type="text/css"&gt; * { margin: 0px; padding: 0px; } .triangle { display: block; height: 0px; width: 0px; border: 50px solid #000; border-color: transparent #f00 #f00 ...

    css3学习与例子

    纯CSS画三角形与圆形 CSS3利用边框和透明度可以实现纯CSS绘制图形。比如,通过设置不同边框颜色和宽度,然后隐藏不需要的部分,可以创建出三角形;而使用`border-radius`设置100%的半径,则可以得到一个完美的圆形...

    css 画不同方向的三角形

    css实现不同方向的三角形

    jquery css3三角形菜单图片切换代码

    本文将详细解析"jquery css3三角形菜单图片切换代码"这一主题,帮助你理解如何利用这两项技术实现动态效果。 首先,jQuery是一个JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它的...

    个性css3三角形设计师案例bootstrap模板-css3动画 设计 设计师 案例 展示 企业 整站 html5 手机 响应式

    本文将深入探讨一个基于CSS3、Bootstrap框架的个性化设计师案例模板,该模板以其独特的三角形设计元素、响应式布局以及丰富的动画效果而引人注目。 首先,CSS3是层叠样式表的第三版,它为网页设计师提供了更多高级...

    如何使用css绘制钻石的方法

    听说你想要钻石:gem:?买不起,还是用css来画一个吧,但你敢送给自己女朋友,不保证不被打。 下午两点要相亲,要不把这个送相亲...这个demo中涉及到了css3 的 transform , css 画三角形 以及 如何给css画出的三角形加边

    css基本面试题.docx

    6. **用CSS画三角形**: 利用边框`border`的透明性,可以创建一个纯色三角形。通过将三个边框设置为透明,然后调整非透明边框的宽度,可以形成一个指向不同方向的三角形。 7. **`display`属性的值**: - `none`:...

    个性css3三角形设计师案例bootstrap模板

    【标题解析】:“个性css3三角形设计师案例bootstrap模板”这个标题揭示了我们要探讨的核心内容。这是一款基于CSS3技术,特别关注三角形图形设计的前端网页模板,它结合了Bootstrap框架,为网页设计师提供了富有创意...

    CSS画出各种三角形如等边三角形

    在CSS世界中,绘制图形可能看似复杂,但通过巧妙利用边框、透明度以及几何原理,我们可以轻松地创建出各种形状,包括等边三角形。本文将深入探讨如何使用CSS来绘制三角形,并特别关注等边三角形的实现方法。 首先,...

    CSS3 SVG三角形不断放大特效.zip

    【CSS3 SVG三角形不断放大特效】是一种利用CSS3的动画特性和SVG(Scalable Vector Graphics)矢量图形技术创建的视觉效果。这个特效通过SVG来绘制一个三角形,并结合CSS3的animation属性,让这个三角形进行旋转并...

    面试经验总结-(附)面试题1

    CSS画三角形通常利用边框(border)和透明度来实现。通过设置不同边框宽度和颜色,并隐藏不需要的边,可以创建出各种形状的三角形。例如,可以创建一个正方形元素,然后只显示一个边框,并将其其他边设置为透明,从而...

Global site tag (gtag.js) - Google Analytics