<!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. 【转】Pandas速查手册中文版

    本文翻译自文章:Pandas Cheat Sheet - Python for Data Science,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常重 ...

  2. C#获取文件夹/文件的大小以及占用空间 转摘自：http://www.cnblogs.com/chenpeng-dota/articles/2176470.html

    C#获取文件夹/文件的大小以及占用空间 今天,头给了个任务:写个方法,我会给你个路径,计算这个路径所占用的磁盘空间 . 然后,找了很多资料.但大部分都是获取文件夹/文件的大小的.对于占用空间的没有成品 ...

  3. [javascript模块化]require.js简单使用

    1.javascript模块规范 CommonJS 主要用于服务器端编程,比如node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用 ...

  4. 力扣 ——3Sum python （三数之和）实现

    题目描述: 中文: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 英文: Give ...

  5. vue img标签用法

    :符号是v-bind的缩写 服务器图片路径和请求本地路径 <img class="v-step-0" id="avatar" :src="myP ...

  6. 部署多个tomcat

    当需要部署多个tomcat的时,为了避免启动tomcat时出现冲突, 修改tomcat中的某些参数,编辑bin/startup.bat,避免启动路径错误,默认会启动CATALINA_HOME所指向的t ...

  7. OS---磁盘存储器

    1.概述 1.1 磁盘存储器  不仅  容量大.存取速度快  而且  可以随机存取: 现代计算机都配置了  磁盘存储器,以  它  为主  存放文件: 对文件 的操作,都将涉及对磁盘的访问: 1.2 ...

  8. 新建maven项目index.jsp文件报错处理

    最近用eclipse新建了一个maven项目,结果刚新建完成index.jsp页面就报错了,先把错误信息贴出来看看 后来就找资料,结果发现两种解决办法,希望可以帮助用得上的人! 第一种:直接在pom. ...

  9. 卸载Anaconda

    conda install anaconda-clean anaconda-clean --yes Anaconda 安装的时候在 .bash_profile中添加了变量: export PATH=& ...

  10. MDK（keil）4.7中文注释乱码解决

    由于编码使用不统一导致别的开发环境下的文件在MDK(keil)下打开中文显示乱码,解决这一问题需要进行码制转换, 可以先将欲打开的文件转换成UTF-8格式(如在notepad中进行转换),也可以在打开 ...