<!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. 关于CoreData的理解和使用.

    CoreData是苹果官方推出的一种方便的面向对象的存储方式,相信大家都已经对其有所了解,但是对于CoreData的概念大家都存在部分的误区.给大家推荐个网址是苹果的官方文档的翻译版(http://o ...

  2. DEDE列表页调用TAG标签

    [field:id function=GetTags(@me)/] 标签就可以调用出来了 只不过不带连接的,如果需要连接,请注释include\helpers\archive.helper.php文件 ...

  3. SQL SERVER分区视图

    借助SQL SERVER分区视图,可以对SQL中的表进行集中管理,下文将以实例的方式为您详解SQL SERVER分区视图,希望对您学习SQL数据库能有所帮助. SQL SERVER分区视图给我们提供了 ...

  4. QImage 与 cv::Mat 之间的相互转换

    近期做图像处理方面的项目比較多,非常多算法自己从头写的话太浪费时间,并且自己写的也不一定完好,早就听说OpenCV在图像处理算法方面功能非常强大,一直没时间学习,这次正好项目用到了.暂时抱佛脚学习些O ...

  5. Flash Recovery Area

    1. 设置闪回恢复区 闪回恢复区主要通过3个初始化参数来设置和管理 db_recovery_file_dest:指定闪回恢复区的位置db_recovery_file_dest_size:指定闪回恢复区 ...

  6. SQL Server DML（SELECT）常见用法（二）

    1   引言 上篇讲到SQL Server中DML的基本使用方法,其中SELECT语句是最常用的语句,其功能强大,结构复杂,下面通过例子,具体介绍其使用方法. 2 SELECT查询语句 SELECT语 ...

  7. 详解 CSS 属性 - 伪类和伪元素的区别（再也不用概念盲了！！！）

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  8. css3 transiton

    div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1 ...

  9. 2016年gift上线相关知识点记录

    1.图片初始化加载 2.如何判断横屏 function horAver() { if (window.orientation == 90 || window.orientation == -90) { ...

  10. 关于OpenXml SpreadSheet列宽根据内容的Auto-suitability

          因为之前接到的一个需求,让excel的宽度自动适应.所以最近一直在看Excel相关内容,从结构到.net的两个类库OpenXml和Office.Interop.Excel,再到一些具体的使 ...