效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="100" height="190" align="middle" alt="">

HTML：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>CSS Triangle Demo</title>

    <link rel="stylesheet" href="triangle.css">

  </head>

<body>

    <h3>Down Triangle</h3>

    <div class="down-triangle">

    </div>



    <h3>Up Triangle</h3>

    <div class="up-triangle">

    </div>



    <h3>Left Triangle</h3>

    <div class="left-triangle">

    </div>    



    <h3>Right Triangle</h3>

    <div class="right-triangle">

    </div>        

  </body>

</html>

CSS：（triangle.css）

.down-triangle {

   width: 0;

   height: 0;

   border-width: 10px 10px 0 10px;

   border-style: solid;

   border-color: #dc291e transparent;

}



.up-triangle {

   width: 0;

   height: 0;

   border-width: 0px 10px 10px 10px;

   border-style: solid;

   border-color: #dc291e transparent;

}



.left-triangle {

   width: 0;

   height: 0;

   border-width: 10px 10px 10px 0px;

   border-style: solid;

   border-color: transparent #dc291e;

}



.right-triangle {

   width: 0;

   height: 0;

   border-width: 10px 0px 10px 10px;

   border-style: solid;

   border-color: transparent #dc291e;

}

github链接：https://github.com/kiwiwin/css-demo中triangle-demo

用CSS border相关属性画三角形的更多相关文章

  1. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  2. css趣味案例：画三角形

    代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  3. Sass mixin 使用css border属性画三角形

    To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...

  4. CSS 定位相关属性 ：position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

  5. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  6. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  7. css中border画三角形

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

  8. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  9. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

随机推荐

  1. 打开网页自动弹出qq客户端

    新建js后调用即可,打开网站自动弹出qq对话框,若qq为关闭状态则启动qq,之后弹出对话框. document.write("<iframe src='tencent://messag ...

  2. bootstrap兼容IE8 解决办法

    bootstrap有使用CSS3,所以ie9以下浏览器不会很顺畅.IE9以下的兼容性不是很好.IE本身就是怪胎,就搞一些和外界标准不一致.搞得web开发考虑这考虑那的兼容性,蛋疼! 基本上css3的没 ...

  3. LibLinear（SVM包）的MATLAB安装

    LibLinear(SVM包)的MATLAB安装 1 LIBSVM介绍 LIBSVM是众所周知的支持向量机分类工具包(一些支持向量机(SVM)的开源代码库的链接及其简介),运用方便简单,其中的核函数( ...

  4. 【Tools】Pro Git 一二章读书笔记

    记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧.   Pro Git (Scott Chacon) 读书笔记:   ...

  5. 广州麒麟网络工作室 qlgame eninge(anroid) opengles c++ matrix

    在opengles中,采用的是可编程渲染管线,矩阵需要自己实现! 先说一下矩阵的理论: 参考一下资料:http://blog.sina.com.cn/s/blog_6084f588010192ug.h ...

  6. 【bzoj 3299】 [USACO2011 Open]Corn Maze玉米迷宫（最短路）

    就一个最短路,并且边长都是1,所以每个点只搜一次. /************************************************************** Problem: 3 ...

  7. SPRING IN ACTION 第4版笔记-第二章-004-Bean是否单例

    spring的bean默认是单例,加载容器是会被化,spring会拦截其他再次请求bean的操作,返回spring已经创建好的bean. It appears that the CompactDisc ...

  8. ANDROID_MARS学习笔记_S03_007_GoogleMap1

    一.简介 二.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <Linea ...

  9. HTML表单和验证事件

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  10. html表格cell合并插件

    数据展示时需要合并部分数据自己写了一个简单插件 合并前: 合并后: 调用示例: var trs = $('table#dataList tbody tr').not('#demo').get(); v ...