原文: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. 电容值E系列标称方法

    本节首先介绍常用的E系列标称方法,然后介绍电阻.电容器.电感器.二极管的分类.性能和识别方法,以及简单的实用电路. 一.E系列标称方法 厂家生产的电阻器,并不是包含任何阻值,就像人民币,只有1.2.5 ...

  2. centos 安装openssl 以及库文件

    yum install openssl yum install openssl-devel

  3. UVa 11922 - Permutation Transformer 伸展树

    第一棵伸展树,各种调试模板……TVT 对于 1 n 这种查询我处理的不太好,之前序列前后没有添加冗余节点,一直Runtime Error. 后来加上冗余节点之后又出了别的状况,因为多了 0 和 n+1 ...

  4. 【原创】Kmeans算法 优缺点分析

    优点: 原理简单(靠近中心点),实现容易(1.2 天),聚类效果中上(依赖K的选择) 缺点: 1. 无法确定K的个数 (根据什么指标确定K) 2. 对离群点敏感 (容易导致中心点偏移) 3. 算法复杂 ...

  5. SH1B LMR62014XMFE/NOPB

    制造商National Semiconductor (TI) RoHS 输出电压20 V 输出电流1.4 A 输入电压2.7 V to 14 V 开关频率1.6 MHz 最大工作温度+ 85 C 安装 ...

  6. C++ STL之set的基本操作

    set是集合,虽然也存在键值和实值,不过两者根本就是同一个值,键值的设置完全就是为了满足红黑树的底层结构,set操作与map很像不过也有些不同. 1. set迭代器与map的不同: (1)set使用接 ...

  7. 自定义sublime代码片段

    sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -&g ...

  8. uva12716GCD XOR

    筛法,打表. 通过打表可知,但gcd(a,b)==a xor b时,a xor b = a-b. 就是求满足 c = a-b且c = a xor b 的c的个数. #include<cstdio ...

  9. iOS开发:Swift多线程NSOperation的使用

    介绍: NSOperation是基于GCD实现,封装了一些更为简单实用的功能,因为GCD的线程生命周期是自动管理,所以NSOperation也是自动管理.NSOperation配合NSOperatio ...

  10. CodeForces 489D Unbearable Controversy of Being

    题意: 给出一个n个节点m条边的有向图,求如图所示的菱形的个数. 这四个节点必须直接相邻,菱形之间不区分节点b.d的个数. 分析: 我们枚举每个a和c,然后求出所有满足a邻接t且t邻接c的节点的个数记 ...