<!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. 九度OJ 题目1371：最小的K个数

    题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 输入: 每个测试案例包括2行: 第一行为2个整数n,k(1< ...

  2. Android studio SweetAlert for Android

    找到个开源项目.github:https://github.com/pedant/sweet-alert-dialog 效果图:https://raw.githubusercontent.com/pe ...

  3. 动态的 css——less

    less 是一种样式语言,它将 css 赋予了动态语言的特性,如变量. 继承. 运算. 函数.less 既可以在客户端上运行(支持 ie6+,webkit,firefox),也可以借助 Node.js ...

  4. Framework7功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  5. 自定义按照index和key访问的List

    List<T>用起来比较方便,但是有时候要按照Index来访问List中的对象有些繁琐,所以想是不是扩展一下,既能按照Index来访问,又能按照Key访问. 实现方法: public cl ...

  6. 缓存 Array.length 是老生常谈的小优化

    问题 缓存 Array.length 是老生常谈的小优化. // 不缓存 for (var i = 0; i < arr.length; i++) { ... } // 缓存 var len = ...

  7. Asp.net MVC + EF6.0 经常出现的问题

    1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...

  8. windows下如何使用ssh远程登录Linux

    1.ssh的安装 sudo apt-get install ssh 或者在Linux情况下,自带有ssh,从第二步开始   2.生成密钥 ssh-keygen 中间过程会提示你存放密钥的地方Enter ...

  9. juce Justification 分析

    很简单的一个类,一个rect放置在另一个rect中如何放置.只是没有考虑边距等,估且认为是在外层作考虑吧.然后认为是外框比内框大,所以外层怕是要进行检查才行 #ifndef JUCE_JUSTIFIC ...

  10. 在windows下，git webhook使用php拉取代码的学习总结

    原来上传代码到测试服务器都是用ftp,我觉得这种方式很低效,而且容易出错,比如忘记传某个修改过文件. 现在项目的代码放在了git@osc上了,想使用他webhook,每当有push的时候,git@os ...