CSS:不可思议的border属性
原文: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;
}
<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>
.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;
}
<div class="delociousLogo">
<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomleft"></div>
<div class="bottomright"></div>
</div>
推荐文章:重温CSS:Border属性
CSS:不可思议的border属性的更多相关文章
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS3:不可思议的border属性
在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三 ...
- css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows
不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...
- 如果用css的border属性画一个三角形
假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...
- CSS之 border 属性
特性 border-width 不支持百分比 border-color 默认颜色是 color border-color 透明值的作用:可利用增加可点击区域,利用内阴影做边框 border 应用 ...
- 巧用css的border属性完成对图片编辑功能的性能优化
一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
随机推荐
- *[codility]AscendingPaths
https://codility.com/programmers/challenges/magnesium2014 图形上的DP,先按照路径长度排序,然后依次遍历,状态是使用到当前路径为止的情况:每个 ...
- C#基础精华----枚举
enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储. (1)默认情况下,枚举中的第一个变量被赋值为0,其他的变量的值按定义的顺序来递增(0,12,3...),因此以下 ...
- VIM树状文件列表NERDTree
下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...
- Quartz所使用的表的说明
Quartz将Job保存在数据库中所需表的说明 QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron T ...
- 2、@RequestMapping注解的用法
@RequestMapping有如下属性值:
- 10个用于Web开发的最好 Python 框架
Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还 ...
- Java 解析 XML
Java 解析 XML 标签: Java基础 XML解析技术有两种 DOM SAX DOM方式 根据XML的层级结构在内存中分配一个树形结构,把XML的标签,属性和文本等元素都封装成树的节点对象 优点 ...
- 对象不支持“attachEvent”属性或方法的解决办法
有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可
- BZOJ 2194 快速傅里叶之二
fft. #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> ...
- 使用Python脚本强化LLDB调试器
LLDB是Xcode自带的调试器,作为一个iOS应用开发程序员,平时我在开发应用时会使用LLDB来调试代码.在逆向应用时,也会用到LLDB来跟踪应用的执行过程. LLDB还内置了一个Python解析器 ...