原文:Magic of CSS border property

译文:不可思议的CSS border属性

译者:dwqs

在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。

1、正三角形:

.triangle_up
{
height:0px; width:0px;
border-bottom:50px solid #006633;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

2、倒三角形:

.triangle_down
{
height:0px; width:0px;
border-top:50px solid #006633;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

3、左三角形

.triangle_left
{
height:0px; width:0px;
border-left:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
float:left;
}

4、右三角形

.triangle_right
{
height:0px; width:0px; float:left;
border-right:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}

5、十字街效果

.crossSquare
{
height:0px; width:0px;
border-right:50px solid blue;
border-top:50px solid gray;
border-bottom:50px solid red;
border-left:50px solid yellow;
}

1至5的demo演示(为了演示方便,对源代码改动了一下):http://jsfiddle.net/rt8cjtwq/embedded/result/

6、方向箭头(突出效果,改动了源代码)

CSS:

.triangle_left
{
height:0px; width:0px;
border-left:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
/*float:left;*/
} .triangle_right
{
height:0px; width:0px; /*float:left;*/
border-right:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
HTML:
<div class="arrow">
<div class="triangle_right"></div>
<div class="arrowLine"></div>
</div> <div class="arrow">
<div class="arrowLine"></div>
<div class="triangle_left"></div>
</div>
效果:

     7、制作一个Delicious Logo:
CSS:
.delociousLogo
{
height:100px; width:100px;
} .topleft
{
height:0px; width:0px;
border-top:50px solid #FFFFFF;
border-right:0px solid #FFFFFF;
border-bottom:0px solid #FFFFFF;
border-left:50px solid #FFFFFF;
float:left;
} .topright
{
float:left;
height:0px; width:0px;
border-top:50px solid #0000CC;
border-right:0px solid #0000CC;
border-bottom:0px solid #0000CC;
border-left:50px solid #0000CC;
} .bottomleft
{
float:left;
height:0px; width:0px;
border-top:50px solid #000000;
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-left:50px solid #000000;
} .bottomright
{
float:left;
height:0px; width:0px;
border-top:50px solid #999999;
border-right:0px solid #999999;
border-bottom:0px solid #999999;
border-left:50px solid #999999;
}
HTML:
<div class="delociousLogo">
<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomleft"></div>
<div class="bottomright"></div>
</div>
效果:(左上角的边框颜色是白色)

推荐文章:重温CSS:Border属性

下一篇:8个很有用的PHP安全函数,你知道几个?

CSS:不可思议的border属性的更多相关文章

  1. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  2. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  3. CSS3:不可思议的border属性

    在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三 ...

  4. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  5. 如果用css的border属性画一个三角形

    假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...

  6. CSS之 border 属性

    特性 border-width 不支持百分比  border-color 默认颜色是 color  border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框  border 应用 ...

  7. 巧用css的border属性完成对图片编辑功能的性能优化

    一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...

  8. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  9. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

随机推荐

  1. *[codility]AscendingPaths

    https://codility.com/programmers/challenges/magnesium2014 图形上的DP,先按照路径长度排序,然后依次遍历,状态是使用到当前路径为止的情况:每个 ...

  2. C#基础精华----枚举

    enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储. (1)默认情况下,枚举中的第一个变量被赋值为0,其他的变量的值按定义的顺序来递增(0,12,3...),因此以下 ...

  3. VIM树状文件列表NERDTree

    下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...

  4. Quartz所使用的表的说明

    Quartz将Job保存在数据库中所需表的说明 QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron T ...

  5. 2、@RequestMapping注解的用法

    @RequestMapping有如下属性值:

  6. 10个用于Web开发的最好 Python 框架

    Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还 ...

  7. Java 解析 XML

    Java 解析 XML 标签: Java基础 XML解析技术有两种 DOM SAX DOM方式 根据XML的层级结构在内存中分配一个树形结构,把XML的标签,属性和文本等元素都封装成树的节点对象 优点 ...

  8. 对象不支持“attachEvent”属性或方法的解决办法

    有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可

  9. BZOJ 2194 快速傅里叶之二

    fft. #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> ...

  10. 使用Python脚本强化LLDB调试器

    LLDB是Xcode自带的调试器,作为一个iOS应用开发程序员,平时我在开发应用时会使用LLDB来调试代码.在逆向应用时,也会用到LLDB来跟踪应用的执行过程. LLDB还内置了一个Python解析器 ...