<!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. vue - blog开发学习4

    1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template> <div class="editor"> &l ...

  2. Git 关于Fast Forward提交的简单说明

    多人协同开发,使用Git经常会看到警告信息包含术语:fast forward, 这是何义? 简单来说就是提交到远程中心仓库的代码必须是按照时间顺序的. 比如A从中心仓库拿到代码后,对文件f进行了修改. ...

  3. 如何去掉万恶的wps屏保

    自从换了上个UI的电脑后,就莫名其妙的多了屏保,最开始以为屏蔽掉就好了,发现他依然不屈不挠的有,然后就百度了好多,也没找到...心累 今天终于开窍了,在角落里找打了.话不多说,上图 打开首页,找到应用 ...

  4. java NIO 详解

    Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API.本系列教程将有助于你学习和理解Java NIO. Java NIO提供了与 ...

  5. REST接口设计

    REST接口设计 为什么要有REST 在传统上,软件和网络是两个不同的领域,很少有交集:软件开发主要针对单机环境,网络则主要研究系统之间的通信.互联网的兴起,使得这两个领域开始融合,现在我们必须考虑, ...

  6. 【串线篇】spring泛型依赖注入原理

    spring泛型依赖注入原理 不管三七二十一 servlet :加注解@servlet service:加注解@service dao:加注解@Repository 这相当于在容器中注册这些个类

  7. Vue路由组件vue-router

    一.路由介绍 Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are ...

  8. qt学习（三）：鼠标图标改变

    qt学习 (三):鼠标图标改变 当你进入一个美好的qt软件场景,比如游戏,电脑的黑白图标会让程序逊色不少, 1改图标要加光标的头文件, 2 载入光标图, 3 再设置改光标就可以了 1在头文件中加 #i ...

  9. QTcpSocket发送结构体

    我需要发送的结构体 struct NetDataHeader_t { int nDataType; int nDataSize; }; struct NetDataBase_t { NetDataHe ...

  10. Kattis - boxes （LCA）

    Boxes There are NN boxes, indexed by a number from 11 to NN. Each box may (or not may not) be put in ...