如何用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,为您提供了近 ...
随机推荐
- ANDROID 中设计模式的採用--结构型模式
结构型模式中的适配器模式.外观模式.装饰模式.代理模式都属于包装模式,都是对另外的类或对象的包装,仅仅是各自的意图不同. 适配器模式通过对另外的类或对象的包装,将其接口转换为用户期 ...
- 计算机程序设计的史诗TAOCP
倘若你去问一个木匠学徒:你需要什么样的工具进行工作,他可能会回答你:“我只要一把锤子和一个锯”.但是如果你去问一个老木工或者是大师级的建筑师,他会告诉你“我需要一些精确的工具”.由于计算机所解决的问题 ...
- WPF(C#)中Bitmap与BitmapImage相互转换
原文:WPF(C#)中Bitmap与BitmapImage相互转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/art ...
- IOS status bar
从iOS7开始,该系统提供2样的管理风格状态栏 由UIViewController管理(每UIViewController我们可以有各自不同的状态栏) 由UIApplication管理(由其统一管理的 ...
- 通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑）
原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...
- 【Unity】贝塞尔曲线关于点、长度、切线计算在 Unity中的C#实现
原文:[Unity]贝塞尔曲线关于点.长度.切线计算在 Unity中的C#实现 写在前面 最近给项目做了个路径编辑,基本思路是满足几个基本需求: [额外说明]其实本篇和这个没关系,可以跳过" ...
- 读unp并动手实践
经过三个月的学习,我发现进度比较慢.照这个进度下去,平均一周花费5-6小时,还不知道读完全书需要多久. 现在做个计划,全书除开简介部分分为 基础 和 高级 套接字编程两部分,其中 基础可以分为 TCP ...
- 微信小程序把玩（十九）radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...
- 零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异
原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作 ...
- Node.js模板引擎学习----ejs
环境:windows+node.js+express 一.安装ejs 打开cmd窗口,输入npm install ejs -g,等待下载安装完成. 二.使用 调用过程中使用路由机制和模板,路由请求地址 ...