在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. 使用babel

    1).Babel支持NPM包形式的安装,打开命令行窗口,切换到项目根目录,命令如下 npm install babel-cli 2).安装成功后,在package.json文件里添加如下代码 &quo ...

  2. Linux --- Ubuntu16.04.5 LTS 虚拟机安装后的软件安装基础操作总结

    1. 配置安装源 因为默认是使用Ubuntu官方服务器,国内电脑使用外国服务器较慢,所以需使用国内的服务器(以下清华大学服务器为例). 方法一: (此过程很慢,实在不动就取消吧,加载一部分也够用,以后 ...

  3. mapreduce使用 left outer join 的几种方式

    需求 数据: [主表]:存放在log.txt中 -------------------------------------------------------- 手机号码 品牌类型 登录时间 在线时长 ...

  4. 【一】Spark基础

    Spark基础 什么是spark 也是一个分布式的并行计算框架 spark是下一代的map-reduce,扩展了mr的数据处理流程. Spark架构原理图解 RDD[Resilient Distrib ...

  5. 从“顶点小说”下载完整小说——python爬虫

    此程序只是单纯的为了练习而做,首先这个顶点小说非收费型的那种小说网站(咳咳,我们应该支持正版,正版万岁,✌).经常在这个网站看小说,所以就光荣的选择了这个网站.此外,其实里面是自带下载功能的,而且支持 ...

  6. Go语言中多字节字符的处理

    1 概述 Go语言的字符串是使用 UTF-8 编码的.UTF-8 是 Unicode 的实现方式之一.本文内容包括:UTF-8 和 Unicode 的关系,Go语言提供的 unicode 包和 uni ...

  7. FPGA静态时序分析基础

    FPGA静态时序分析基础 基本概念 Skew: 时钟偏移 Skew表示时钟到达不同触发器的延时差别,Tskew = 时钟到达2号触发器的时刻 - 时钟到达1号触发器的时刻. Jitter: 时钟抖动 ...

  8. windows系统下系统变量path误删恢复方法

    每台计算机安装程序不同,环境变量path会有不同,若误删了环境变量path,可以如下完美解决.   Win+R 输入regedit打开注册表(开始-运行里输入regedit) 找到  HKEY_LOC ...

  9. 关于使用READ TABLE语句

    READ tabe 是用来遍历内表,取第一条符合条件的记录. READ TABLE <itab> [INTO <wa>] WITH KEY <key> [BINAR ...

  10. 20155203 2016-2017-3 《Java程序设计》第4周学习总结

    20155203 2016-2017-3 <Java程序设计>第4周学习总结 教材学习内容总结 1.父类和子类类似于集合和元素,不同的地方是子类可以拓展(extends)父类之外的方法. ...