如何用css实线所需要的小三角
使用css实现三角符号
关于使用css制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理
下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号
那么如何使用css的该属性来实现三角符号的效果呢，代码如下：
html代码
<body>
<div></div>
</body>
css代码
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
效果图：
这种方法是使用的伪类来实现的三角符号，然后使用绝对定位，不会占用空间
transparent是透明色，大家如果想要的三角符号的方向不一样，只需将对应方向的边框颜色加上，其他的改为透明色即可
如何用css实线所需要的小三角的更多相关文章
- 如何用css设置鼠标属性的小手
在元素中添加onmouseover="this.style.cursor='hand'"或者 cursor:pointer;
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
- 利用css伪类编写冒泡小三角
HTML代码 <div class="lf otherLogin"> <span>其他方式注册</span> <div class=&qu ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- css实现小三角（原理）
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- 如何用CSS实现在新窗口打开链接？
*如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...
- Animo.js ：一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
随机推荐
- tar.gz文件命名及压缩解压方法
tar.gz文件命名 tar是把文件打成一个包,并不压缩; gz是用gzip把打成包的.tar文件压缩; 所以成了一个.tar.gz的文件 压缩 # tar cvfz backup.tar.gz /x ...
- Leetcode 144 Binary Tree Preorder Traversal 二叉树
二叉树的基础操作:二叉树的先序遍历(详细请看数据结构和算法,任意本书都有介绍),即根,左子树,右子树,实现方法中还有用栈实现的,这里不介绍了 /** * Definition for binary t ...
- It's about trust
所有问题, 最后,它归结为:信任. 你能相信别人? 我不是Low esteem.相反,我有信心.问题是.我有一个别人缺乏信任的. Daria家长们说,伪君子:我们必须相信你. Daria马上问:然后, ...
- Spring框架：Spring安全
在传统的Web发展,安全码被分散在各个模块,这样方便管理,有时你可能会错过一个地方导致安全漏洞.为了解决这个问题,它的发明Spring Security.它是业务逻辑的有关安全代码的作用全部转移到一个 ...
- 【C#】解决MouseHook捕获鼠标动作，在有些电脑上SetWindowsHookEx失败返回0的问题
原文:[C#]解决MouseHook捕获鼠标动作,在有些电脑上SetWindowsHookEx失败返回0的问题 最近在debug鼠标位置捕获的功能时发现在其中的一台开发电脑上,SetWindowsHo ...
- jq自定义下拉菜单，当用户点击非自身元素（下拉菜单）本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- PHP提取字符串中的图片地址
PHP提取字符串中的图片地址 $str='<p><img border="0" src="upfiles/2009/07/1246430143_1.jp ...
- PMC另类阐述
生产部门,坦克,铠甲战士,血厚硬气 业务部门,刺客,杀气十足,强势收割人头 采购部门,法师,在坦克身后持续输出 PMC,辅助,血不够厚扛不了伤害,输出不够拿不到人头,是团队中最容易被忽视的角色 坦克和 ...
- 解决手机提示TF卡受损需要格式化问题
昨晚因为上QQ FOR PAD后.关机.结果又杯具了.上次无意看到一个SD卡修复命令,收藏起来了.一试,还真管用.现把它写出来.分享给大家.以后出现SD卡受损,千万不要再格式化内存卡了.修复过程:1. ...
- Android零基础入门第49节：AdapterViewFlipper图片轮播
原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...