小技巧-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>

原文地址:https://www.cnblogs.com/qtbb/p/11735443.html

时间: 2024-12-26 21:13:48

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

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

转载自:http://www.ithao123.cn/content-649841.html 移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript">     window.onscroll=function(

小技巧 - CSS中:hover调试

在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果就看不到了.后来查了一些资料,终于找到解决办法了. FF中: Chrome中: 没有什么技术含量,只是分享一下,也免得自己忘记了.

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

第八十四节,css布局小技巧

css布局小技巧 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; background-color: #ff4e37; position: relative; } /*插入图片的div*/ .b{ width: 384px; height: 240px; background-color: #ff4e37; overflow: hidden; } /*遮罩层div*/ .c{ width: 384px; h

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 1 html, body { 2 height: 100%; 3 margin: 0; 4 } 5 6 body { 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 display:

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… CSS 1 2 3 4 5 /* 添加边框 */ .nav li { border-right: 1p

css选择器顺序的小技巧

在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧. 首先是li标签的样式,这里就不说了,主要说一下hover的操作. 显示ul的hover,让所有的li标签缩短宽度. ....... 原文来自:css选择器顺序的小技巧

css小技巧(1)

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s

css学习の第六弹—样式设置小技巧

一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class="txtCenter">我想要在父容器中水平居中显示.</div></body> css代码:<style> .txtCenter{ text-align:center; }</style>>>2.块状元素(定宽)通过设置&quo