<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .caret0{

            width:0;

            height:0;

            border: 5px solid #000;

        }

        .caret1{

            width:0;

            height:0;

            border-top: 5px solid #000;

            border-left: 5px solid #fff;

            border-right: 5px solid #fff;

            border-bottom: 5px solid #000;

        }

        .caret2{

            width:0;

            height:0;

            border-top: 5px solid #fff;

            border-left: 5px solid #f00;

            border-right: 5px solid #f00;

            border-bottom: 5px solid #fff;

        }

        .caret2{

            width:0;

            height:0;

            border-top: 5px solid #fff;

            border-left: 5px solid #f00;

            border-right: 5px solid #f00;

            border-bottom: 5px solid #fff;

        }

        .caret3{

            width:0px;

            height: 0px;

            border-bottom: 5px solid #000;

            border-left: 5px solid transparent;

            border-right: 5px solid transparent;

        }

        .caret4{

            width:0px;

            height: 0px;

            border-right: 5px solid #000;

            border-top: 5px solid transparent;

            border-bottom: 5px solid transparent;

        }

        .caret5{

            width:0px;

            height: 0px;

            border-top: 5px solid #000;

            border-left: 5px solid transparent;

            border-right: 5px solid transparent;

        }

        .caret6{

            width:0px;

            height: 0px;

            border-left: 5px solid #000;

            border-top: 5px solid transparent;

            border-bottom: 5px solid transparent;

        }

    </style>

</head>

<body>

<h1>通过border的设置的三角形</h1>

<div class="caret0"></div>

<div class="caret1"></div>

<br>

<div class="caret0"></div>

<br>

<div class="caret1"></div>

<br>

<div class="caret2"></div>

<br>

向上的三角形

<div class="caret3"></div>

<br>

向左的三角形

<div class="caret4"></div>

<br>

向下的三角形

<div class="caret5"></div>

<br>

向右的三角形

<div class="caret6"></div>

</body>

</html>

caret彻底的理解css的三角形【通过border】的更多相关文章

  1. 纯css画三角形

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

  2. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  3. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  4. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  5. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  6. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  7. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  8. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  9. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

随机推荐

  1. Qt之再谈窗体阴影

    前面就窗口阴影已经写过一篇博客,使用九宫格的思路实现的,在我看来,凡是用程序能实现的尽量不要使用图片代替(在保证效率的前提下),今天再次分享关于我的一些小见解!     先看效果:       窗口阴 ...

  2. Prefabs实例化 ResourceMgr

    http://www.xiaobao1993.com/886.html 来源与小宝个人笔记[稍作修改] //使用  Prefabs/Resources/stone1 ResourceMgr.GetIn ...

  3. fseek/ftell/rewind/fgetpos/fsetpos函数使用-linux

    程序: #include<stdio.h> int main(int argc,char *argv[]) { FILE * stream; fpos_t pos; stream = fo ...

  4. 贪吃蛇 WPF

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. Linux文件管理常用命令

    1.目录管理 [ls.cd.pwd.mkdir.rmdir.tree] tree:list contents of directories in a tree-like format. 2.文件管理 ...

  6. JavaWeb核心编程之(四.1)JSP

    JSP简介: JSP是简化Servlet编写的一种技术, 它将Java代码和HTML语句混合在一个文件中编写, 只对网页中药动态产生的内容采用Java代码来编写, 而对固定不变的静态内容采用普通的静态 ...

  7. dialog获取焦点

    弹出层是一个iframe openWindow:function (options) { var url = options.url; url += url.indexOf("?" ...

  8. JDK常见问题 环境变量配置

    "javac不是内部命令或外部命令" Windows7 安装"jdk-6u26-windows-x64.exe"后,常提示"javac不是内部命令或外 ...

  9. 未能加载文件 %CommonDir%\dte90a.olb。未能找到该文件，因此解决此问题的尝试失败

    分类: 日常应用问题 2012-08-04 10:53 914人阅读 评论(0) 收藏 举报 microsoft2010c vs2010 启动时提示 ------------------------- ...

  10. ORACLE RAC中的oc4j和gsd资源以及RAC相关的进程

    1.RAC相比单实例数据库多出的进程: LMS - Gobal Cache Service Process 全局缓存服务进程 LMD - Global Enqueue Service Daemon 全 ...