css实现小三角(原理)





这个div的样式如下所示:
div{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: lightgreen pink yellow lightblue;
}


#triangle{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent yellow transparent;
}
#triangle{
width: 0px;
height: 0px;
*width: 40px;
*height: 40px;
font-size:;
line-height:;
overflow: hidden;
border-width: 20px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent yellow transparent;
}

t.png)


border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;


border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;
右三角:

q.png)
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
/* css */
*{
margin: 0px;
padding: 0px;
text-align: center;
}
#container{
position: relative; //这句很重要,因为小三角是相对父元素#container来绝对定位的
width: 50px;
height: 40px;
border:1px solid lightblue;
margin: 200px auto;
padding: 20px; }
#chat{
width: 50px;
height: 40px;
background-color: lightblue;
}
#triangle{
position: absolute; //设置小三角绝对定位
width: 0px;
height: 0px;
*width: 14px;
*height: 14px;
font-size:;
line-height:;
overflow: hidden;
border-width: 7px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
top: 33px; //33px:父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px
left: 70px; //70px: #chat的宽度50px + 父元素#container的内边距20px =70px
}
/* html代码 */
<div id="container">
<div id="chat"></div>
<div id="triangle"></div>
</div>
css实现小三角(原理)的更多相关文章
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- CSS生成小三角
前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- css的小三角实现的方式
先上一个简单的例子哈: 此时的方向向下. 如果想方向向上的话用:border-top:0;border-bottom:4px solid; 1. width:0 height:0 border宽度,颜 ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...
- css实现小三角效果
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>新闻标 ...
随机推荐
- 女生的最爱,装饰品。WPF也有,Adorner。(上海晒衣服理念)
说到装饰,不由要说到女性. 去年过年回家给我妈买了周大福项链,很明显就感觉待遇就不一样了,即使这样,还是被一个阿姨说应该买更重点的.看来钱这种东西果然是多一点才好.虽然自己无所谓,但让家里人更开心也是 ...
- LInux MySQL 数据库 的一些操作
数据库安装: ………… 创建数据库连接新用户: 1.登录mysql #mysql -u root -p 2.新增用户 insert into mysql.user(Host,User,Password ...
- .Net批量插入数据到SQLServer数据库,System.Data.SqlClient.SqlBulkCopy类批量插入大数据到数据库
批量的的数据导入数据库中,尽量少的访问数据库,高性能的对数据库进行存储. 采用SqlBulkCopy来处理存储数据.SqlBulkCopy存储大批量的数据非常的高效,将内存中的数据表直接的一次性的存储 ...
- weblogic配置数据源
启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台 打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源 ...
- 修改input框默认黄色背景
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 ...
- HTML的页面IE注释
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- 楼主,可否发一份代码给我!QQ....
一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...
- iOS开发之远程推送
说到远程推送,应该用的也挺多的,今天就基于SEA的云推送服务,做一个推送的小demo,来了解一下iOS中的远程推送是怎么一回事儿,首先你得有苹果的开发者账号,好咸蛋也差不多了,主要内容走起. 一.准备 ...
- Objective-C中把数组中字典中的数据转换成URL
可能上面的标题有些拗口,学过PHP的小伙伴们都知道,PHP中的数组的下标是允许我们自定义的,PHP中的数组确切的说就是键值对.而在OC我们要用字典(Dictionary)来存储,当然了Java用的是M ...