在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. flask中请求勾子

    请求勾子 在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比如: *在请求开始时,建立数据库连接; *在请求开始时,根据需求进行权限校验; *在请求结束时,指定数据的交互格式; 为了让每 ...

  2. jdbc之连接Oracle的基本步骤

    // 1.加载驱动程序 Class.forName("oracle.jdbc.driver.OracleDriver"); // 2.获取数据库连接 Connection conn ...

  3. ruby Rspec+jenkins+allure持续集成

    1.Allure2使用说明 2.ruby下载allure的gem gem install allure-rspec 3.修改源码 C:\Ruby23-x64\lib\ruby\gems\2.3.0\g ...

  4. Python编程小坑

    在Pycharm中编辑文本文件,如果使用\r\n会产生两个空行? exit("xxx),会导致Process finished with exit code 1,所以如果要输入信息然后退出, ...

  5. docker 容器模式下部署mysql 主从复制

    1.计划用两台host来部署,分别部署一台 mysql,一主一从,2.配置好主从mysql配置文件,更改文件名即可[client]port = 3306socket = /var/run/mysqld ...

  6. C语言中的强制类型转换

    先直接放程序吧,后面还有总结. -------------------------------------------start------------------------------------ ...

  7. openssl windows 下 编译 bat

    ++++全部++++++++ @echo offrem set sslpath=C:\0openssl\rem echo %sslpath% set X86_lib=C:\0openssl\32\li ...

  8. PL/SQL轻量版(四)——存储函数/存储过程与触发器

    概述 ORACLE 提供可以把 PL/SQL 程序存储在数据库中,并可以在任何地方来运行它.这样就叫存储过程或函数.过程和函数统称为 PL/SQL 子程序,他们是被命名的 PL/SQL 块,均存储在数 ...

  9. 实验一 Java开发环境的熟悉(Linux+Eclipse)

    实验一 Java开发环境的熟悉(Linux+Eclipse) 实验内容及步骤 使用JDK编译.运行简单的Java程序 打开windows下的cmd → 输入cd Code命令进入Code目录 → 输入 ...

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

    20155333 2016-2017-2<Java程序设计>第二周学习总结 教材学习内容总结 1. Java 类型系统:基本类型和类类型(参考类型) 2. 基本类型: 整数:short整数 ...