在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. shell习题第5题:批量更改文件后缀名

    [题目要求] 找到123/目录下所有后缀名为.txt的文件 1. 批量修改.txt为.txt.bak 2. 把所有.bak文件打包压缩为123.tar.gz 3. 批量还原文件的名字,即把增加的.ba ...

  2. WebGl 利用缓冲区对象画多个点

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. Mybatis 配置文件

    1.核心配置文件 sqlMapConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOC ...

  4. 客户端与服务器交互中的Token

    Token:在计算机身份认证中是令牌(临时)的意思,类似于 MD5 加密之后的长字符串 特点:1.随机性,不可预测  2.具有有限期 3.唯一 作用:1.防止重复提交  2.防止CSRF(跨站请求伪造 ...

  5. PHP打包zip并下载

    $file_template = FCPATH.'canddata/cand_picture.zip';//在此之前你的项目目录中必须新建一个空的zip包(必须存在) $downname = $car ...

  6. IComparer 与 IComparable

    static void Main() { var people = new ArrayList(); people.AddRange(new ArrayList { }, }, }, } }); Co ...

  7. removeAttribute与removeAttributeNode的区别

    1.removeAttributeNode() 方法删除指定的属性,并以 Attr Node 对象返回被删除的属性. 例: <!DOCTYPE html><html><b ...

  8. java随机数的生成

    我们经常会用到随机数的生成,作为唯一性的id或者标识: long now = System.currentTimeMillis(); SimpleDateFormat dateFormat=new S ...

  9. Object重写equals()、hashcode()方法的原因

    一.问题 在我们新建java对象的时候,如果后期用到对象比较,就必须重写equals(0.hashcode()方法 为什么必须重写这两个方法? 只是比较相等的话,重写equals()方法不就可以吗?为 ...

  10. Drupal8 新建第一个模块

    参考: https://www.drupal.org/developing/modules/8 https://www.drupal.org/node/1915030 https://www.drup ...