浅谈css边框属性border(3) – border的三角制作

浏览: 210次 日期:2018年01月25日 20:51:16 作者:青格勒

浅谈css边框属性border(1)—border的属性介绍

浅谈css边框属性border(2)—border的一般使用

浅谈css边框属性border(3)—border的三角制作

浅谈css边框属性border(4)—border的一些使用技巧

 

今天就谈谈用border去制作三角的方法。

一、先解释一下下面用的到的知识

1、transparent是透明的意思

2、角度是反的,top的时候三角是往下的,以此类推

3、你只要控制border-xxx-color就可以了

4.高度和宽度必须是0

下面是咱们的代码:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<p><br/>注意:上面四个三角div的想用的CSS为如下</p>
<p>1、border:10px solid transparent; border-top-color:#000;</p>
<p>2、border:10px solid transparent; border-right-color:#da4939;</p>
<p>3、border:10px solid transparent; border-left-color:#cb7832;</p>
<p>4、border:10px solid transparent; border-bottom-color:#a6e22e;</p>
<style type="text/css">
    .div1,.div2,.div3,.div4{ height:0; width:0;}
    .div1{ border:10px solid transparent; border-top-color:#000;}
    .div2{ border:10px solid transparent; border-right-color:#da4939;}
    .div3{ border:10px solid transparent; border-left-color:#cb7832;}
    .div4{ border:10px solid transparent; border-bottom-color:#a6e22e;}
</style>
所有的浏览器显示的都一样,只有很微小的区别,详情看下面的图:

所有浏览器都是一样的,咱们对于css border制作三角就不需要兼容写法了,可以大胆的使用了,哈哈

二、咱们再打开以下脑洞,这次就把border的四个border-width改变试试

代码如下:

<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<p><br/>注意:上面四个三角div的想用的CSS为如下:</p>
<p>1、border:10px solid transparent; border-top-color:#000; border-top-width:30px;</p>
<p>2、border:10px solid transparent; border-right-color:#da4939; border-top-width:30px;</p>
<p>3、border:10px solid transparent; border-left-color:#cb7832; border-top-width:30px;</p>
<p>4、border:10px solid transparent; border-bottom-color:#a6e22e; border-top-width:30px;</p>
<style type="text/css">
    .div5,.div6,.div7,.div8{ height:0; width:0;}
    .div5{ border:10px solid transparent; border-top-color:#000; border-top-width:30px;}
    .div6{ border:10px solid transparent; border-right-color:#da4939; border-top-width:30px;}
    .div7{ border:10px solid transparent; border-left-color:#cb7832; border-top-width:30px;}
    .div8{ border:10px solid transparent; border-bottom-color:#a6e22e; border-top-width:30px;}
</style>

得到的是这样的:

他们的形状,有点对不一样的。

 

我们可以得出结论:

1、如果是用一个面显示且宽度大的话会等角三角形拉长(二(1))

2、如果是两边(比如right的top/bottom、left的top/bottom等等),三角的对应角会拉长(二(2、3))

3、如果加大的是对立面的,那就三角的大小没有变化,倒是位置会变(二(4))

 

有可能这样解释大家会有点懵,所以我做了一个demo-》css border制作三角

文章所使用的demo-》本文用到的CSS+html代码

 

 

 

 

 

文章链接:http://cenggel.com/htmlcss/57.html

版权声明:文章《浅谈css边框属性border(3) – border的三角制作》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注