<!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. 使用ashx一般处理程序，读取不到Session的问题

    一般的处理程序文件里面是用不了Session的,必须得实现Session接口才可以用. public class RandomCode : IHttpHandler, System.Web.Sessi ...

  2. Redis 实践笔记

    本文来自:http://www.cnblogs.com/me-sa/archive/2012/03/13/redis-in-action.html 最近在项目中实践了一下Redis,过程中遇到并解决了 ...

  3. Apache启用GZIP压缩网页传输方法

    一.gzip介绍 Gzip是一种流行的文件压缩算法,如今的应用十分广泛,尤其是在Linux平台.当应用Gzip压缩到一个纯文本文件时,效果是很明显的,大约能够降低70%以上的文件大小.这取决于文件里的 ...

  4. Apple Mach-O Linker Warning 警告解决的方法

    此警告解决的方法: 项目名字 -> targets -> Build Settings -> search path 把里面无用的东西 点 减号 删掉 即可了. $(function ...

  5. hbase namespace问题

    如果遇到进入shell之后HMaster自动挂掉的问题,并且master的log里出现“TableExistsException: hbase:namespace”字样,很可能是更换了Hbase的版本 ...

  6. JS 精粹(方法）

    数组方法: 模拟队列的操作:push()/shift();unshift()/pop();模拟栈操作:push()/pop(); push()返回增加后的长度.unshift也是.pop和shift返 ...

  7. java之从字符串比较到==和equals方法区别

    我们先看代码 String str1 = new String("hello"); String str2 = "hello"; System.out.prin ...

  8. HDU2094（产生冠军）题解

    HDU2094(产生冠军)题解 以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 根据给定现有比赛结果推断分析冠军.(这描述...我建议还是看题吧,题不长) [题目分析] 给出的 ...

  9. 关于height:100%两三事

    对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...

  10. lua学习笔记(2)-常用调用

    assert(loadstring("math.max(7,8,9)"))dofile("scripts/xxx.lua")math.floor()math.r ...