用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 ...
随机推荐
- 要将表的限制条件写到与该表同级别的where中
测试目的:将朱查询的限制条件放到子查询的where中,查看性能影响. 测试数据:create table t1 as select object_id,object_name from dba_obj ...
- LightOj_1364 Expected Cards
题目链接 题意: 一副牌, 每个花色13张牌,加上大小王,共54张. 遇到大小王可以代替其中某种花色. 给定C, D, H, S. 每次抽一张牌, 问抽到C张梅花, D张方块, H张红桃, S张黑桃所 ...
- ubuntu maven 安装 设置
http://blog.csdn.net/tiefanhe/article/details/9774189 1.安装 maven ,下载地址:http://maven.apache.org/downl ...
- X窗口系统的协议和架构
转自X窗口系统的协议和架构 在电脑中,X窗口系统(常称作 X11.X)是一种以位图显示的网络透明化窗口系统.本条目详述 X11 的协议及其技术架构. X C/S模型和网络透明性 X 基于C/S模型.运 ...
- linux使用ps1设置命令行提示符
要自定义命令行提示,需要ps1来设置.完成自定义需要以下几个步骤: 1.编辑~/.bashrc文件 vi ~/.bashrc 2.在.bashrc文件中添加以下一行自定义内容 export PS1=& ...
- ANDROID_MARS学习笔记_S04_006_用获取access_token,access_token_secrect
一.代码流程 1.MainActivity会开启PrepareRequestTokenActivity 2.PrepareRequestTokenActivity会根据配置文件的CONSUMER_KE ...
- 使用ListView时遇到的问题
这周练习ListView时遇到了一个问题,从数据库中查询出的数据绑定到LIstView上,长按某个item进行删除操作,每次点击item取得的id都不对,调了半天终于找到了原因,关键是自己对自定义的B ...
- C# 如何为应用程序加入多个图标?
对于WINDOWS XP操作系统,浏览文件时有列表,图标和平铺三种,显示出文件图标的大小分别为16x16,32x32,48x48这三种尺寸.有些程序包含这三个尺寸的图标,随着浏览文件时的设置来选择尺寸 ...
- oracle 10g WMSYS.WM_CONCAT 函數的用法
select t.rank, t.Name from t_menu_item t; 10 CLARK 10 KING 10 MILLER 20 ADAMS 20 FORD 20 JONES 20 SC ...
- 【转】iOS Provisioning Profile(Certificate)与Code Signing详解 -- 待看
原文网址:http://blog.sina.com.cn/s/blog_82c8198f0102vy4j.html 引言 关于开发证书配置(Certificates & Identifiers ...