[转]CSS实现三角形的方法

1:border分割线解析

                    

  width:40px;
  height:40px;
 background:#000;
  border-width:30px;
  border-style:solid;
  border-color:#e66161 #f3bb5b #94e24f #85bfda;

参照以上代码,按照我的理解,盒模型应该是这样

但是实际上图片是这样的

4个边框是上图4种不同颜色的方框,当然这是我理解的应该是这样,但是事实上不是想象中的那样

为什么呢?这个原因我也纠结了好久

看下上图盒模型,问个问题,按照我理解的盒模型所示的4种边框如何显示?尤其是红色箭头两个border重叠处,难道显示2种重叠颜色?那是什么颜色了?这也太扯了吧,所以这也就是问题原因所在

原因就是“浏览器自动把boder重叠处平分为两半

所以才会出现上图那样,在两种不同颜色的border交界处有一条很明显的分割线(第一张图中的白色箭头)

也就是在盒模型中两个border重叠(红色箭头)区域进行平分

当然明白了以上原理,用css画三角形就很快就能上手了

2.当第一个图形高度为0的情况会发生什么事情呢?

代码如下

 background:#000; border-width:30px;
 border-style:solid;
 border-color:#e66161 #f3bb5b #94e24f #85bfda; 

当然大家会想了,高度为0,图形如何呈现出来呢?高度为0,但是有border,所以,看到如下图形

你会发现没有高度之后当然background也不会显示了,只会把它本身的border显示出来,而且“浏览器自动把boder重叠处平分为两半“,所以就成了上图那样

看到这里,相信应该明白如何做三角形了

3. transparent

transparent,被用来作为颜色的一个参数值,用于表示背景透明,也就是背景色

所以,当我们把代码改成如下

border-width:30px;
border-style:solid;
border-color:#f3bb5b transparent transparent transparent; 

你会发现成了下面的图形,当然咱们的背景色是白色

他这种图形是吧右,下,左的边框都改成了透明色,所以会呈现为下三角

如果你要说我要做个有三角,这个在切换轮播图的时候作为按钮比较常见,那我们都知道一个上右下左的原则,你选择哪一个方向作为透明色,那他就成了反方向的三角形,如上图

再举个例子,左三角的话,右边框有颜色,其余背景色就可以了,仔细考虑下是不是这样?像下面这些

ps:IE6下把边框设置成 transparent 时会出现黑影,并不会透明,把 border-style 设置成 dashed 可以解决。

4.拓展1:实现好看的tip框,如下图所示

个人掌握的有3种方法 div嵌套、transform选择、特殊符号◆.这三种方法

    方法1:div嵌套

    

/*HTML*/<div class="parent1">       /*这里要注意2个div的嵌套顺序*/  <div class="div2"></div>  <div class="div1"></div></div>

/*css Document*/.parent1{     position: relative;
     width: 150px;
     height: 70px;
     background:#dddddd;
     border:1px solid #f07848;
     border-radius: 10px;}.div1{    position:absolute;    bottom:-10px;    border-style:solid;    border-width:15px;    border-color:#dddddd transparent transparent transparent;}.div2{    position:absolute;    bottom:-11px;    border-style:solid;    border-width:15px;    border-color:#f07848 transparent transparent transparent;}

在这个div嵌套里面要注意2个div的嵌套顺序和2个div间隔1个像素来显示,当你做出来时你放大会感觉有点瑕疵,当然用户一般不会追究这些的

    

    方法2.transform实现

/*HTML*/<div class="parent2">  <div class="div3"></div></div>

/*css Document*/.parent2{    position:relative;    width:150px;    height:70px;    background:#dddddd;    border:1px solid #f07848    border-radius:10px;}}.div3{    position:absolute;
    top:563px;
    left:805px;
    width:20px;
    height:20px;
    background:#dddddd;
    border-width: 15px;
    border-left:1px solid #f07848;
    border-bottom: 1px solid #f07848;
    transform:rotate(-45deg);}

当然这里兼容性没写,也不是太好

    3.特殊字符实现:和第一中方法类似,创建2个含有特殊字符的div框嵌套在一起,修改文字颜色和div的边框实现,当然你会看到firebug上篮框那么高,那是字体高度

/*HTML*/<div class="parent3">  <div class="div4">◆</div> <div class="div5">◆</div>

</div>
/*css Document*/.parent3{      position:releative;      width: 150px;      height: 70px;      border:1px solid #f07848;      background:#dddddd;      border-radius: 10px;}.div4{
    position: absolute;    left:70px;    bottom:-15px;    font-size:30px;    color:#f07848;}.div5{
    position: absolute;    left:70px;    bottom:-16px;    font-size:30px;    color:#dddddd;}

2014-12-4 09:53:08

再补充一个通过:before伪元素实现三角

老样子,先贴代码

div:before{      position:absolute;      border-color:transparent;      border-right-color:#000;      border-width:15px;      border-style:solid;      display:block;      content:" ";      top:20px;      left:-30px;      width:0;      height:0;}
div:after{      position:absolute;      border-color:transparent;      border-right-color:#fff;      border-width:15px;      border-style:solid;      display:block;      content:" ";      top:20px;      left:-30px;      width:0;      height:0;}

这里的要点是2个伪元素需要相差一两个像素的距离,一个是背景色的伪元素盖住了有颜色(边框颜色)的伪元素,层叠显示的,这种感觉是最简单的方式,当然有更好的,目前我没有找到

更新:

新方法实现一个旋转45度的高宽为0,只有border的正方形,这种方法目前是除了切图外是最好的

 1    em{
 2         position:absolute;
 3         /*这里写成你想要的位置*/
 4         left:73px;
 5         top:11px;
 6         /*这里写成你想要的背景色*/
 7         background:#ffffff;
 8         /*这里写成你想要的哪一边边框颜色*/
 9         border-top:1px solid  #CAC1C1;
10         border-left:1px solid #CAC1C1;
11         /*这里写成你想要的大小*/
12         width:10px;
13         height:10px;
14         /*旋转45度兼容*/
15         transform: rotate(45deg);
16         -o-transform: rotate(45deg);
17         -webkit-transform: rotate(45deg);
18         -moz-transform: rotate(45deg);
19         filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=‘auto expand‘, M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
20 }

时间: 2024-11-05 14:53:40

[转]CSS实现三角形的方法的相关文章

三种纯CSS实现三角形的方法

看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:) 纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩! 1.利用 border 属性实现三角形 这个原理很简单,我我们

css做三角形的方法

用csss做三角形使用border属性 一. <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .div1{ border: 200px solid red; border-color: transparent transparent black transparent; width: 0; } </style><

重新整理:纯CSS写三角形

整理一下几年前写的知识点,关于如何用纯CSS写三角形. 方法1:利用CSS3旋转正方形 知识点: transform:rotate(45deg) 兼容性:FF/Chrome/IE9+ html: <div class="imgbox1"> <img src="images/200x300.jpg" alt="" /> <p>内容文字内容文字内容文字内容文字</p> </div> CSS:

CSS 利用border三角形绘制方法

CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. 复制代码 代码如下: #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent; /*border:  50px

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 背景透明

网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法代码如下: 1 #triangle-up { 2 width: 0; 3 height: 0; 4 border-left: 50px solid transparent; 5 border-right: 50px solid transparent; 6 bord

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

纯CSS绘制三角形(各种角度)

我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100

纯CSS写三角形-border法[基础篇]

纯CSS写三角形-border法[基础篇] 注意:所有知识点将不考虑IE6 ( ̄▽ ̄") 在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可.但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量.所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量.减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量. CSS3出现以后,“方形旋转45度”制作三角形的