小技巧-CSS 三角的做法
<!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 三角的做法的更多相关文章
- 记录一些实用的小技巧-CSS篇
1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...
- 5.css三角的做法
如上图所示,类似这样的小三角都可以通过以下代码写出: .box1 { width: ; height: ; /* border: 10px solid pink; */ border-top: 10p ...
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...
- 小技巧 - CSS中:hover调试
在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...
- html/css/js小技巧实例
一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用
通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...
- 编写css相关注意事项以及小技巧
一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...
随机推荐
- /etc/fstab自动挂载文件
装了Windows 10和Ubuntu双系统,想把win10下的“文娱“盘自动开机挂载到Ubuntu上. 首先你看一下/etc/fstab这个文件喽: 依葫芦画瓢呗.首先看看你要挂载的硬盘是哪一块: ...
- MVC使用Area:CS0234: 命名空间“System.Web”中不存在类型或命名空间名称“Optimization”(是否缺少程序集引用?)
一,如图: 解决方法是:将区域生成的的文件夹下的web.config中的using System.Web.Optimization删掉 如下,Area文件目录找到Web.config Web.conf ...
- linux 系统磁盘管理体系
目录 linux 系统磁盘管理体系 一.磁盘的基本概念 二.磁盘的内部结构 三.磁盘的外部结构 四.磁盘的接口及类型 五.fdisk磁盘分区实践 六.gdisk 分区 七.parted 高级分区工具. ...
- 五、properties编写
1.properties和yml编写对比 2.properties中文乱码解决 上面的内容输出的结果 原因 idea 默认编码是UTF-8,properties需要修改对应的编码 设置编码后的结果正常 ...
- Administrator 被禁用
Administrator 被禁用 问题: 重装系统后出现输入用户名和密码的情况,原因是Administrator被禁用. 解决方法: 1.开机后shift+重启 –>选择疑难解答 --> ...
- 给元素绑定 class
<div id="app04"> <label v-bind:class="{'Class1':Class1}">sasjadjagd& ...
- 【LeetCode 35】搜索插入位置
题目链接 [题解] 还是那句话,想知道l或者r所在的数字的含义 就想想它最后一次执行的时候在干什么就行. [代码] class Solution { public: int searchInsert( ...
- 3D打印切片软件Cura及CuraEngine原理分析
引言 年初开始进入3D打印行业,受命以Cura为基础,研发一款自主的3D打印切片软件. 自主研发要取其长处,补其不足,首先自然是要搞清楚Cura到底做了什么,读Cura的代码是必需的.我一向都觉得比起 ...
- 探索Redis设计与实现5:Redis内部数据结构详解——quicklist
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- (转)使用openGL显示图像(一)建立OpenGL ES的环境
编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/environment.html 要在应用中使用OpenGL E ...