CSS3:不可思议的border属性
在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;
}

CSS3:不可思议的border属性的更多相关文章
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS:不可思议的border属性
原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
- CSS3的box-sizing属性
盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形
border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...
- 一个需求认识CSS3 的transform-origin属性
最近遇到一个需求,是以前做PHP的同事问我的问题 下面是他在百度发的问题截图 根据上面的截图,我稍微梳理了一下 问题:现在有个div,旋转45度后,这个div的宽度会动态改变,并且要向右上方偏移 ...
随机推荐
- 什么是cookie,作用是什么? 以及session的理解
cookie: 1.定义:什么是cookie? cookie就是存储在客户端的一小段文本 2.cookie是一门客户端的技术,因为cookie是存储在客户端浏览器中的 3.cookie的作用:是为了 ...
- else的妙用--if-else 成对出现,可以检测意外的放生,方便找bug
else用于意外情况的检测.可以写入log,或者串口打印出来. 养成这样的习惯,好处 1 提高程序稳定性,可靠性. 2 遇到bug有头绪.
- ACM1005:Number Sequence
Problem Description A number sequence is defined as follows:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) ...
- node.js之express中app.use
express中app.use 用法: app.use([path,] function [, function…]) 一.app.use() 在express中是怎么工作的 app.use在expr ...
- 面试和工作中的map
map是C++ STL中的关联容器,存储的是键值对(key-value),可以通过key快速索引到value.map容器中的数据是自动排序的,其排序方式是严格的弱排序(stick weak order ...
- FlexPaper 里的pdf2json.exe 下载地址
在使用FlexPaper 做在线阅读,需要使用到pdf2json.exe,将PDF转成JSON或者XML格式,网上很少下载的,现在提供一个下载的地址 http://pan.baidu.com/s/1i ...
- 20155232 实验四 Android程序设计
20155232 实验四 Android程序设计 一.实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握 ...
- 20155306 实验三 敏捷开发与XP实践
20155306 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器 ...
- WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定
原文:WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM ...
- RHCE-EXAM 模拟题目
真实考试环境说明: 你考试所用的真实物理机器会使用普通账号自动登陆,登陆后,桌面会有两个虚拟主机图标,分别是system1和system2.所有的考试操作都是在system1和system2上完成.S ...