<!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. JS属性

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型. 代码: var a1;var a2 = tr ...

  2. STL set接口中使用结构体类型

    需要在结构体中重载'<'运算符,下面是我写的一个例子: #include<iostream> #include<set> using namespace std; str ...

  3. 移动web开发前准备知识了解（html5、jquery）笔记

    1.经常使用 插件工具  chrome插件:   Mobile & Tablet Emulator(用于常见移动端适配):(重点) Mobile Emulator is an useful o ...

  4. Basic Concepts of Block Media Recovery

    Basic Concepts of Block Media Recovery Whenever block corruption has been automatically detected, yo ...

  5. 随机抽样一致性算法（RANSAC）

    本文翻译自维基百科,英文原文地址是:http://en.wikipedia.org/wiki/ransac,如果您英语不错,建议您直接查看原文. RANSAC是"RANdom SAmple ...

  6. 自定义Dialog，实现由下而上的弹出效果（模仿QQ退出等）

    方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...

  7. zoj 1067

    输入一组RGB颜色列表,每行一个颜色,是三个从0~255的整数 前16行是目标颜色组,-1 -1 -1表示结束   16组颜色以后接下来的几行是需要判断的,看它和哪个颜色的距离D最小,找出这个对应的颜 ...

  8. linux系统下memcached启动正常但程序无法连接的问题解决

    在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPo ...

  9. linux 下 安装nexus

    1. 获得root权限  [ferrari@localhost ~]$ su -   2. 下载nexus集成版  [root@localhost ~]# cd /usr/local  [root@l ...

  10. VirtualBox安装linux增强工具报错

    错误提示: Building the OpenGL support module                         [FAILED] 解决办法 cd /media/VBOXADDITIO ...