zoukankan      html  css  js  c++  java
  • css实现三角形(转)

    css实现三角形

      (2012-09-10 14:17:26)
    标签: 

    css

     

    三角形

     

    杂谈

     
    分类: 网页制作
    css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重叠处分45度角平分。即将一个border-color值设置为所需的三角形的颜色,其余三个边设置为背景的样色,然后将height和width设为0。
    HTML代码:
    <div class="triangle1"></div> 
    <div class="triangle2"></div> 
    <div class="triangle3"></div>
    <div class="triangle4"></div>
    <div class="triangle5"></div>
    Css代码:
    .triangle1{0; height:0; border-color:#F00 #F0F #00F #0F0; border-20px;border-style: solid;}
    .triangle2{0; height:0; border-color:#F00 #F0F #00F #0F0; border-20px 20px 20px 0;border-style: solid; margin-top:10px;}
    .triangle3{0; height:0; border-color:#F00 #F0F #00F #0F0; border-20px 20px 0 0;border-style: solid; margin-top:10px;}
    .triangle4{0; height:0; border-color:red transparent transparent transparent; border-20px;border-style: solid; margin-top:10px;}
    .triangle5{0; height:0; border-color:red transparent transparent transparent; border-20px;border-style: solid; margin-top:10px; _border-left-color: white; _border-bottom-color: white; _border-right-color: white;}

    .triangle1{0; height:0; border-color:red pink blue green; border-20px;border-style: solid;}

    .triangle2{0; height:0; border-color:red pink blue green; border-20px 20px 20px 0;border-style: solid; margin-top:10px;}

    .triangle3{0; height:0; border-color:red pink blue green; border-20px 20px 0 0;border-style: solid; margin-top:10px;}

    .triangle4{0; height:0; border-color:red transparent transparent transparent; border-20px;border-style: solid; margin-top:10px;}

    .triangle5{0; height:0; border-color:red transparent transparent transparent; border-20px;border-style: solid; margin-top:10px; _border-left-color: white; _border-bottom-color: white; _border-right-color: white;}


    FF/ie7/ie8/chrome/显示如图
    css实现三角形
    在ie6中显示如下:( border-color设置为transparent时在IE6中默认给了背景黑色)
     css实现三角形
    解决方法:如triangle5的样式,加上_border-left-color: white; _border-bottom-color: white; _border-right-color: white;即可。也可以把transparent改为具体的颜色,比如#fff
  • 相关阅读:
    luoguP2016 战略游戏
    [Usaco2006 Nov]Corn Fields牧场的安排
    [Ahoi2009]self 同类分布
    POJ3208:Apocalypse Someday
    [usaco2010 Oct]Soda Machine
    [Usaco2005 Dec]Scales 天平
    PTA的Python练习题(十九)
    堆叠注入
    PHP序列化与反序列化(三)总结实战
    攻防世界web进阶1-12总结篇
  • 原文地址:https://www.cnblogs.com/lianghong/p/8037556.html
Copyright © 2011-2022 走看看