在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属性的更多相关文章

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

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

  2. CSS:不可思议的border属性

    原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...

  3. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  4. 重温CSS:Border属性

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

  5. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

  6. CSS3的box-sizing属性

    盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...

  7. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

    border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...

  9. 一个需求认识CSS3 的transform-origin属性

    最近遇到一个需求,是以前做PHP的同事问我的问题    下面是他在百度发的问题截图 根据上面的截图,我稍微梳理了一下 问题:现在有个div,旋转45度后,这个div的宽度会动态改变,并且要向右上方偏移 ...

随机推荐

  1. MySQL数据约束

    定义:建表时在各字段类型后设置,用来对用户操作表的数据进行约束. 代码: 1.默认值  :   default ' ' 作用:当用户对使用默认值的字段不插入值的时候,就使用默认值(自动填充). 注意: ...

  2. linux静态IP最简配置

    vi /etc/sysconfig/network-scripts/ifcfg-xxx TYPE="Ethernet"BOOTPROTO="static"ONB ...

  3. 有关MySQL数据库命令

    phpstudy使用最终端打开数据库 : 第一次打开默认的密码是:root. 进入后对数据可以进行增删查改. show databases;  是查看数据库的指令 注意:分号是数据库的结束符,没有加分 ...

  4. ionic 环境搭建

    1.安装nodejs (8.4.0) 下载地址 https://nodejs.org/zh-cn/ 2.Java jdk  版本号  jdk1.8.0_121 3.安装 cordova npm ins ...

  5. Iframe 定义内联的子窗口(框架)

    1.Iframe 定义内联的子窗口(框架),用于在网页内显示网页 语法: <iframe src="URL"></iframe>URL 指向隔离页面的位置, ...

  6. 使同一个server上不同port的django应用可在同一个浏览器上打开

    如果我们有两个django应用site1和site2同时跑在同一个server的不同端口,同时我们在同一个浏览器的不同tab登录.那么这时就出出现这种情况,当我们登录site2时就会将site1上登录 ...

  7. PHpStorm + phpstudy 断点调试配置

    步骤: phpstudy     其他菜单 ->打开配置文件 ->打开 php.ini ->找到 XDebug ->XDebug修改成下面文字 [XDebug] :红色  (1 ...

  8. Python安装tesserocr遇到的各种问题及解决办法

    Tesseract的安装及配置 在Python爬虫过程中,难免遇到各种各样的验证码问题,最简单的就是​这种验证码了,那么在遇到验证码的时候该怎么办呢?我们就需要OCR技术了,OCR-即Optical ...

  9. 使用nohup或者tmux将程序挂在后台

    程序挂在后台 nohup nohup 命令 & 这样的命令会将屏幕的输出重定向到同目录的nohup.out中,可以使用 > 来重定向输出. nohup 命令 > .log & ...

  10. 20155207 2016-2017-2 《Java程序设计》第十周学习总结

    20155207 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 狭义的网络编程范畴 ...