用CSS border相关属性画三角形
效果
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="100" height="190" align="middle" alt="">
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Triangle Demo</title>
<link rel="stylesheet" href="triangle.css">
</head>
<body>
<h3>Down Triangle</h3>
<div class="down-triangle">
</div>
<h3>Up Triangle</h3>
<div class="up-triangle">
</div>
<h3>Left Triangle</h3>
<div class="left-triangle">
</div>
<h3>Right Triangle</h3>
<div class="right-triangle">
</div>
</body>
</html>
CSS：（triangle.css）
.down-triangle {
width: 0;
height: 0;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #dc291e transparent;
}
.up-triangle {
width: 0;
height: 0;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #dc291e transparent;
}
.left-triangle {
width: 0;
height: 0;
border-width: 10px 10px 10px 0px;
border-style: solid;
border-color: transparent #dc291e;
}
.right-triangle {
width: 0;
height: 0;
border-width: 10px 0px 10px 10px;
border-style: solid;
border-color: transparent #dc291e;
}
用CSS border相关属性画三角形的更多相关文章
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- css趣味案例：画三角形
代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- Sass mixin 使用css border属性画三角形
To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #0 ...
- CSS 定位相关属性 ：position
我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...
- css border
CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用CSS的border画三角形
用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
随机推荐
- 自由树的计数 Labeled unrooted tree counting
问题: 4个标记为1,2,3,4的节点构成自由树(算法导论里的定义,连接着,无环,无向的图),一共有多少种构造方法?如果N个节点呢? 解决方法: 4个节点可以通过穷举的方式得到答案,一共有16中方式. ...
- HTTP状态码——对照表
ASCII码介绍: HTTP状态码(HTTP Status Code)用来表示web服务器响应客户端的HTTP状态.主要有一下5种状态类型.1xx 消息2xx 成功3xx 重定向4x ...
- 太受不了了，，REST_FRAMEWORK太方便啦~~
按英文原始的DOCUMENT走一圈,从最手工的输出到高度的集成. 最后真的就几行代码,实现最常用的JSON API..纯RESTFUL风格. 但,其核心是要记住序列化生反序列的过程,都是要以PYTHO ...
- SPRING IN ACTION 第4版笔记-第二章-001-用@Autowired\@ComponentScan、@Configuration、@Component实现自动装载bean
1. package soundsystem; import org.springframework.context.annotation.ComponentScan; import org.spri ...
- 虚拟机安装了ubuntu，忘记密码修复
在虚拟机中按照以下步骤重新为用户设定新密码. 重启Ubuntu,随即长按shift进入grub菜单: 选择recovery mode,回车确认: 在Recovery Menu中,选择“Root Dro ...
- 转：二十、java的抽象类
http://blog.csdn.net/liujun13579/article/details/7737667 现实世界中,人们表征世界时,会把现实世界中的很多类具有相同特征的事物归为一个抽象类.比 ...
- 字符串匹配的KMP算法(转)
转载:http://kb.cnblogs.com/page/176818/ 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE&quo ...
- BZOJ2287: 【POJ Challenge】消失之物
2287: [POJ Challenge]消失之物 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 254 Solved: 140[Submit][S ...
- 获取客户端IP地址 via C#
获取客户端IP地址 via C# 说明:本文中的内容是我综合博客园上的博文和MSDN讨论区的资料,再通过自己的实际测试而得来,属于自己原创的内容说实话很少,写这一篇是为了记录自己在项目中做过的事情,同 ...
- ASPNETMVC多语言方案
ASPNETMVC多语言方案 前言: 好多年没写文章了,工作很忙,天天加班, 每天都相信不用多久,就会升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰,想想还有点小激动~~~~ 直到后来发生 ...