<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

      /*

      宽和高设置为0 （貌似可以省略）

      防止兼容性，line-height 和 font-size 设置为 0

      */

      .nav {

        width: 0;

        height: 0;

        line-height: 0;

        font-size: 0;

        border: 30px solid transparent; /* 边框颜色设置为透明 */

        border-left-color: turquoise;

      }

    </style>

  </head>

  <body>

    <div class="nav"></div>

  </body>

</html>

小技巧-CSS 三角的做法的更多相关文章

  1. 记录一些实用的小技巧-CSS篇

    1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...

  2. 5.css三角的做法

    如上图所示,类似这样的小三角都可以通过以下代码写出: .box1 { width: ; height: ; /* border: 10px solid pink; */ border-top: 10p ...

  3. 小技巧css解决移动端ios不兼容position:fixed属性，无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

  4. 小技巧 - CSS中:hover调试

    在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...

  5. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  6. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  7. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  8. SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

    通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...

  9. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

随机推荐

  1. etcd注册服务

    etcd作为最简单(轻量,精简)的kv服务.etcd可以应用很多方面,但是它有一个特点,etcd只是基础,需要你自己实现功能.它不像其其它组件开箱即用,也正是如此,它足够简单精巧. 回到主题,etcd ...

  2. Linux拓展练习部分--输入输出 / find部分 /基础拓展2

    目录 输入输出部分 find部分 基础阶段-拓展练习2 输入输出部分 1.输入时间命令"date"将当前系统时间输出到/data/1.txt [root@centos7 ~]# d ...

  3. docker学习---搭建Docker私有库及删除库内镜像

    环境准备系统: cat /etc/redhat-release CentOS Linux release (Core) 主机两台,分别是docker私有库服务器(IP 192.168.121.121) ...

  4. 【Flutter学习】之DateTime日期转换

    概述: 表示一个时间点 通过构造函数或解析格式化的字符串创建DateTime对象,并且符合ISO 8601标准的子集,小时是24小时制,范围在0-23之间 DateTime对象创建之后,将是固定不变的 ...

  5. Requests使用

    Requests 简介 Requests库 requests是一个很实用的Python HTTP客户端库,编写爬虫和测试服务器响应数据时经常会用到.可以说,**Requests 完全满足如今网络的需求 ...

  6. bean的初始化和销毁方法

    1.bean的生命周期: bean创建---初始化----销毁的过程 容器管理bean的生命周期: 我们可以自定义初始化和销毁方法:容器在bean进行到当前生命周期的时候来调用我们自定义的初始化和销毁 ...

  7. MariaDB Where子句

    WHERE 子句过滤各种语句,如SELECT,UPDATE,DELETE和INSERT. 他们提出了用于指定行动的标准. 它们通常出现在语句中的表名后面,其条件如下. WHERE子句本质上像一个if语 ...

  8. java中循环删除list中元素的方法

    重点哈 印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接 ...

  9. Who Saw My Blog

    I found that my blog has visitors!!! I wonder who has watched my blog and what did they feel at that ...

  10. css 布局（圣杯、双飞翼）

    一. 圣杯布局. 左右固宽,中间自适应 三列布局,中间宽度自适应,两边定宽: 中间部分要在浏览器中优先展示渲染: 具体步骤:1.设置基本样式2.圣杯布局是一种相对布局,首先设置父元素container ...