效果

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. Http 状态码详解

    状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...

  2. 解决CocoaPods在OS X 10.11出现问题－b

    最近把mac系统升级到10.11系统,但是在用pod install命令的时候,却提示command not found.后来上网查了下才知道,Cocoapods在10.11系统上发生了变化. 在st ...

  3. QT5.4 计算器程序 打包&发布,解决dll的最新解决方案

    QT写界面还是很不错,就是打包会比较麻烦,折腾了一天总算是打包完成了. QT软件的打包发布一个难点是必备dll文件的识别,现在高版本QT自带了一个windeployqt工具,直接会把需要的dll生成一 ...

  4. Java入门－浅析Java学习从入门到精通【转】

    一. JDK (Java Development Kit)  JDK是整个Java的核心,包括了Java运行环境(Java Runtime Envirnment),一堆Java工具和Java基础的类库 ...

  5. Android引导界面

    一.所需素材       很有必要整理一下,里面附带友盟的社会化分享组件,我就不去掉了. 二.代码 import com.umeng.update.UmengUpdateAgent; import a ...

  6. 快速搭建Web服务器软件PHP+Apache+MySQL

    搭建网站或者博客,需要一个合适的 Web 服务器.除了如下能在购买的虚拟空间上进行操作外,我们也可以在自己的电脑上搞定,因为可以用来方便快捷地测试网站或者博客主题,无论是 Wordpress.Joom ...

  7. 李洪强iOS开发Swift篇—04_运算符

    李洪强iOS开发Swift篇—04_运算符 一.运算符 1.Swift所支持的部分运算符有以下一些 赋值运算符:= 复合赋值运算符:+=.-= 算术运算符:+.-.*./ 求余运算符:% 自增.自减运 ...

  8. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-003-@Conditional根据条件生成bean及处理profile

    一.用@Conditional根据条件决定是否要注入bean 1. package com.habuma.restfun; public class MagicBean { } 2. package ...

  9. [QuickX]xcode运行Quick-cocos2d-x项目时自动更新lua资源文件

    1.项目设置 build settings ->build options ->Scan all source files and Includes = YES 2.加入script (1 ...

  10. Hadoop RPC源码阅读-客户端

    Hadoop版本Hadoop2.6 RPC主要分为3个部分:(1)交互协议(2)客户端(3)服务端 (2)客户端 先展示RPC客户端实例代码 public class LoginController ...