用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 ...
随机推荐
- 用Python和Django实现多用户博客系统（二）——UUBlog
这次又更新了一大部分功能,这次以app的形式来开发. 增加博客分类功能:博客关注.推荐功能(ajax实现) 增加二级频道功能 更多功能看截图及源码,现在还不完善,大家先将就着看.如果大家有哪些功能觉的 ...
- 让IIS识别PUT和DELETE请求
转眼间年底了,突然的我就挪了窝.新的公司,新的电脑,新的服务器....面对新环境,手有些痒,于是试着编写自己的简易版restful API. restful的话,对资源的相应操作应该被体现成http动 ...
- Linux发行版
Linux 发行版(英语:Linux distribution,也被叫做GNU/Linux 发行版),为一般用户预先集成好的Linux操作系统及各种应用软件.一般用户不需要重新编译,在直接安装之后,只 ...
- BZOJ 1003: [ZJOI2006]物流运输trans DP+最短路
Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...
- 天草(初级+中级+高级)VIP和黑鹰VIP破解教程(全部iso下载地址)
以下就是我收集的教程地址,之前我收集到的都是一课一课下载的,虽然这样,我也下载完了天草的全部课程.这里分享的是在一起的iso文件,比起一课课下载爽多了.~~ 还有这些教程都是从零起点开始教的,不用担心 ...
- uva 1400 - "Ray, Pass me the dishes!"
又是一道线段树区间更新的题: #include<cstdio> #include<algorithm> #include<cstring> #define ll l ...
- VS2010 C# 调用Web Service .
转自:http://blog.csdn.net/fenglailea/article/details/7262566 打开VS2010,打开"文件-新建-网站",选择"A ...
- [转贴] C++ 判断主机是否处于联网状态下
直接让本机访问一个网站,如果成功的话,就说明成功联网,没有访问成功,则说明没有联网!!! #include<iostream> #include <WINSOCK2.H> #p ...
- SEH and C++ Exceptions，自定义CSeException
Description of CSeException CSeException class is based on CException class provided by MFC. I overw ...
- Android开源项目发现---GridView 篇（持续更新）
1. StaggeredGridView 允许非对齐行的GridView 类似Pinterest的瀑布流,并且跟ListView一样自带View缓存,继承自ViewGroup 项目地址:https:/ ...