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实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂
随机推荐
- Codeforces Round #195 A B C 三题合集 (Div. 2)
A 题 Vasily the Bear and Triangle 题目大意 一个等腰直角三角形 ABC,角 ACB 是直角,AC=BC,点 C 在原点,让确定 A 和 B 的坐标,使得三角形包含一个矩 ...
- centos 7 卸载 mariadb 的正确命令
#列出所有被安装的rpm package rpm -qa | grep mariadb #卸载 rpm -e mariadb-libs-5.5.37-1.el7_0.x86_64 错误:依赖检测失败: ...
- Unity3D内置着色器
Unity内部提供了一些可以直接使用的着色器,这些内置着色器包括以下6个方面: (1)Performance of Unity shaders 着色器的性能和两个方面有关:shader本身和rende ...
- 2014 网选 5014 Number Sequence（异或）
/* 题意:a, b两个序列,规定由[0, n]区间的数! 求 a[i] ^ b[i] 的和最大! 思路:如果数字 n的二进制有x位, 那么一定存在一个数字m,使得n^m的所有二进制位 都是1,也就是 ...
- ruby -- 进阶学习（六） devise修改邮件发送者邮箱
在config/environment.rb/development.rb或者config/environment/production.rb中, 简单示范例子: Text03::Applicatio ...
- DateTimePicker 控件的格式设置
DateTimePicker 控件的格式设置 CustomFormat属性设置 : yyyy-MM-dd HH:mm:ss 月大写M,分钟小写m,小时H代表24小时计算,h代表12小时计算yyyy- ...
- HTML5探索一（那些新增的标签和属性）
tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...
- yousa_team团队项目——兼职平台网站 工作进度
4月31 初步设计网站界面,功能以及数据库关系图 网站包括登陆注册界面,商家和学生都有个人主页,查看兼职信息界面和反馈界面,管理员有查看反馈界面,查看兼职市场,管理后台界面 登录注册界面实现用户的登陆 ...
- JS魔法堂：获取当前脚本文件的绝对路径
一.前言 当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧! 二.各大浏览器的实现方式 [a]. Chrome和FF 超简单的一句足矣! va ...
- hive的内部表与外部表创建
最近才接触Hive.学到了一些东西,就先记下来,免得以后忘了. 1.创建表的语句:Create [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_na ...