css三角形的实现
实底三角形:
<html>
<head>
<title></title>
<style type="text/css"> a{
display: block;
width: 0;
height: 0;
border-left: 50px solid transparent; /*左边框实现透明;50ppx是三角形左边框的宽度*/
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
透明三角形:
原理:用俩个三角形进行叠加
<html>
<head>
<title></title>
<style type="text/css"> a:before{
top:0;
left:0;
content: '';
position: absolute;
display: block;
width: 0;
height: 0; border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}
a:after{
top:1px;
left:2px;
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border-left: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 48px solid #fff;
}
a{
position: relative;
}
</style>
</head>
<body>
<a href="">1111</a>
</body>
</html>
css三角形的实现的更多相关文章
- 前端读者 | CSS三角形和饼图
@羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...
- [CSS]三角形
CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:
- CSS三角形广告文字
街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...
- 纯css三角形
三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...
- [HTML/CSS]三角形
CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:
- css三角形实现的几种方法的区别
演变: .triangle{ height: 30px; width: 30px; display: inline-block; border: 30px solid; border-color: # ...
- css 三角形空心三角形的简单实现
<style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px ...
- CSS三角形的实现原理及运用
原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...
- CSS三角形/气泡的实现原理及应用
记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂
随机推荐
- c++类的 static 和const那些事
1.static成员变量(非const)必须在类外定义,在类中只是作为声明(声明其scope为该类),不能使用类初始化成员列表来初始化,只能在定义的时候初始化. 2.static const的成员变量 ...
- HTTP 详解一 -- 转
HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...
- MFC的消息管理
一般而言,与视图状态和用户输入有关的命令由视图类来处理,与文件操作有关的命令由文档类来处理,与窗口布局有关的命令由主框架类来处理,与程序的运行状态有关的命令由APP类来处理.
- ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
今天我们的项目遇到问题 为了避免跨站点脚本攻击, 默认我们项目是启用了 validateRequest,这也是 ASP.NET 的默认验证规则.项目发布后,如果 customError 启用了,则会显 ...
- iOS开发工具——网络封包分析工具Charles
简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...
- Unity3D内置着色器
Unity内部提供了一些可以直接使用的着色器,这些内置着色器包括以下6个方面: (1)Performance of Unity shaders 着色器的性能和两个方面有关:shader本身和rende ...
- 斜堆(一)之 C语言的实现
概要 本章介绍斜堆.和以往一样,本文会先对斜堆的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理如出一辙,选择其中之一进行了解即可.若文 ...
- Awk by Example--转载
原文地址: http://www.funtoo.org/Awk_by_Example,_Part_1?ref=dzone http://www.funtoo.org/Awk_by_Example,_P ...
- 解决msgfmt无法使用的问题
参考: http://blog.sina.com.cn/s/blog_4fb490ff0100csne.html http://linux.die.net/man/1/msgfmt http://pa ...
- node log4js包
http://blog.csdn.net/heiantianshi1/article/details/43984601