效果

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. APNs推送, 处理通知

    设备接到apns发来的通知,应用处理通知有以下几种情况: 1. 应用还没有加载 这时如果点击通知的显示按钮,会调用didFinishLaunchingWithOptions,不会调用didReceiv ...

  2. 理解Python的迭代器

    首先,廖雪峰老师的教程中解释了迭代器和生成器,这篇文章只是补充和我个人的总结. 什么是迭代 可以直接作用于for循环的对象统称为可迭代对象(Iterable). 可以被next()函数调用并不断返回下 ...

  3. 第 8 章 适配器模式【Adapter Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 好,请安静,后排聊天的同学别吵醒前排睡觉的同学了,大家要相互理解嘛.今天讲适配器模式,这个模式也很简单,你笔记本上的那个 ...

  4. Android使用Dom解析xml

    一.理论准备                 二.上代码  <?xml version="1.0" encoding="utf-8" ?> < ...

  5. Investigation of Different Nets and Layers

    Investigation of Different Nets and Layers Overview of AlexNet (MIT Places | Flickr Finetuned | Oxfo ...

  6. [Android应用]《花界》V1.0 正式版隆重发布！

    http://www.cnblogs.com/qianxudetianxia/archive/2012/04/05/2433669.html 1. 软件说明(1). 花界是一款看花软件:“看花,议花, ...

  7. Spring 定时任务 quartz的配置

    环境:我用的是spring3.2,其中引入了quartz-1.5.2.jar 先写一个任务类: package com.hlcg.common.task; public class TestJob { ...

  8. C++的try catch到底能防止什么错误？

    我在.h文件里定义:    LoadingWidget* w;然后.cpp文件里定义: void MyClass::ModifyTask(){    // w = new LoadingWidget( ...

  9. Java序列化与Hessian序列化的区别

    Java序列化: Java序列化会把要序列化的对象类的元数据和业务数据全部序列化为字节流,而且是把整个继承关系上的东西全部序列化了.它序列化出来的字节流是对那个对象结构到内容的完全描述,包含所有的信息 ...

  10. 【HDOJ】2149 Public Sale

    看Discuss说是博弈论,没学到这个分类.不过仔细想了想,发现.如果m<=n,那么可能结果为m,m+1...n.否则,如果m%(n+1) == 0,那么无论如何都会输,因为无论先报价什么数,如 ...