用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 ...
随机推荐
- uboot start.S分析
一.概述 1.本文综述及特色 阅读uboot,start.S是第一个源程序文件,主要完成初始化看门狗.定时器.重定位(拷贝代码段到内存中).初始化堆栈.跳转到第二阶段等工作. 网上关于这些内容的 ...
- oracle 报“无效数字”异常和“ORA-01830: 日期格式图片在转换整个输入字符串之前结束”
1.问题1 执行下列SQL: sql = "select count(1) as totle from vhl_model_data a where a.OBTAIN_CREATE_TIME ...
- BZOJ 1828: [Usaco2010 Mar]balloc 农场分配
Description Input 第1行:两个用空格隔开的整数:N和M * 第2行到N+1行:第i+1行表示一个整数C_i * 第N+2到N+M+1行: 第i+N+1行表示2个整数 A_i和B_i ...
- 纯js将form表单的数据封装成json 以便于ajax发送
使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...
- 【POJ 1984】Navigation Nightmare（带权并查集）
Navigation Nightmare Description Farmer John's pastoral neighborhood has N farms (2 <= N <= 40 ...
- 【BZOJ 3529】 [Sdoi2014]数表 （莫比乌斯+分块+离线+树状数组）
3529: [Sdoi2014]数表 Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和j的所有 ...
- 关于新版SDK报错You need to use a Theme.AppCompat theme的两种解决办法
android的一个小问题: Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme ( ...
- 关于MIUI6下使用Widget调用Toast的一个问题
编写了一个Widget程序,在继承AppWidgetProvider类中调用Toast,发现如下问题: 在小米2,MIUI Version:MIUI5.6.4|Beta, Android Versio ...
- div居中鼠标悬浮显示下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android获取系统cpu信息，内存，版本，电量等信息
本文转自:http://www.cnblogs.com/brainy/archive/2012/05/30/2526752.html 1.CPU频率,CPU信息:/proc/cpuinfo和/proc ...