<!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. Linux系统实验

    前言:怎么感觉Linux运维和Linux系统实验没什么关系?该不会的还是不会(@@).记录一下几个实验吧. 本篇目录: 实验一 编程环境 实验二 文件读写 实验三 进程通信 实验一 编程环境√ 实验步 ...

  2. iview 分割面板效果（二）

    源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-split-panel

  3. SQL数据库—<5>视图、索引…简单学习

    视图 掌握:1.视图是个什么东西?2.会建视图,会查视图3.知道视图的主要功能是查询,不是增删除改. 视图的定义: 视图可以认为是从一个数据表或者多个数据表中导出的表,视图本身没有任何数据,它是用来存 ...

  4. mysql百万级别重排主键id（网上的删除重建id在大数据量下会出错）

    网上教程: 先删除旧的主键 再新建主键 :数据量少时没问题,不会出现主键自增空缺间隔的情况(如:1,2,3,5):但是大数据量时会出现如上所述问题(可能是内部mysql多进程或多线程同时操作引起问题) ...

  5. mysql limit 数据重复及遗漏

    某天写了一段CRUD,提测给QA,后来想起来忘记按规则排序了,然后修改了代码提交,这个时候QA扔给我一条狗,不,是一个BUG. 内心一片忧伤,CRUD也有BUG啊,怎么办怎么办,赶紧看看去. BUG描 ...

  6. Linux常用功能脚本

    设置定时任务 crontab -e 1 0 * * * /bin/find /mnt/tomcat/logs/ -mtime +3 -type f -name "*.log" -e ...

  7. JavaSE---多线程---集合类

    1.概述 1.1 Java提供的ArrayList.LinkedList.HashMap等都是线程不安全的类,如何解决: 1.1 使用Collections类提供的方法将  其  包装成线程安全类: ...

  8. 【leetcode】982. Triples with Bitwise AND Equal To Zero

    题目如下: Given an array of integers A, find the number of triples of indices (i, j, k) such that: 0 < ...

  9. HashMap常见面试题

    1.HashMap底层是通过什么来实现的? 在JDK1.7中是通过数组+链表来实现的: 在JDK1.8中是通过数组+链表+红黑树来实现的 2.HashMap在JDK1.8中为什么使用红黑树? 为了弥补 ...

  10. Android Studio 打包生成正式apk（XXX-release.apk）的两种方式

    { 方式一:使用Android Studio生成1.点击Build->Generate Signed apk,首次点击可能会提示输入操作系统密码2.弹出如下对话框,还没有生成过keystore ...