在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. IDEA导入eclipse项目并部署到tomcat

    1.首先引入本地项目 我这里是maven项目就直接选择的以maven项目引入,如果选eclipse的话,pom文件不会被初始化,部署tomcat会出问题 这项选完后,就一路next,jdk可以在引入的 ...

  2. string 模块

    string 说明:string 模块保留了很多有用的常量和类,用来处理 string 和 unicode 对象. 作用:包含处理文本的常量和类. capwords( ) capwords( ) 的作 ...

  3. 课程 python 文件操作复习

    # 文件处理 # 打开文件 #open('路径','打开方式','指定编码方式') # 打开方式 r w a r+ w+ a+ b #r+ 打开文件直接写 和读完再写 # 编码方式 —— utf-8 ...

  4. Python 1.3 元组与文件

    一 Python元组Tuple类型 元组T= (1, 2, 3, 4)是不可变类型,属于序列,但顶层元素不可变,仅支持count()和index()操作. -*- coding:UTF- -*- # ...

  5. express函数参数之next

      关于next主要从三点来进行说明:   next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么?     1.Next的作用 我们在定义express中间件函数的时候都 ...

  6. 关于NODEJS性能测试和优缺点总结

    最近公司开发了一套新产品,采用nodejs前端+Java后端框架,为完全的前后端分离结构,以下为相关信息. 软件及功能: 软件 功能 Nginx 负责反向代理和负载均衡 Nodejs 前端代码 JDK ...

  7. DSP5509项目之用FFT识别钢琴音调(2)

    1. 本节主要是学习TLV320AIC32这个音频芯片,Easy5509 开发板上有一个语音编解码芯片 TLV320AIC23.TLV320AIC23 是一个高性能的多媒体数字语音编解码器,它的内部 ...

  8. LUIS 语义识别API调用方法

    本例使用itchat获取微信文字消息,发送给LUIS返回识别消息,再将返回消息格式化后通过微信发回 关于itchat的使用参考我的另外一篇随笔itchat个人练习 语音与文本图灵测试例程 # -*- ...

  9. 现有新的iOS更新可用,请从iOS12 beta版进行更新.解决方案

    问题描述: ios系统一直弹出“现有新的iOS更新可用,请从iOS12 beta版进行更新”的提示,很烦的. 应该只出现在安装测试版ios12的手机上. 解决方案: 删除描述文件无法解决. 有网友机制 ...

  10. java list根据id获取子节点

    工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历 ...