用纯css画个三角形
用纯css画个三角形以下是源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用纯css画个三角形-柯乐义</title>
</head>
<body>
<style type="text/css">
.rightdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent transparent #A9DBF6;
}
.bottomdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: #A9DBF6 transparent transparent transparent;
}
.leftdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: transparent #A9DBF6 transparent transparent;
}
.topdirection
{
width:0;height:0;
line-height:0;
border-width:20px;
border-style:solid;
border-color: transparent transparent #A9DBF6 transparent;
}
</style>
<div class="rightdirection"></div>
<p>
<div class="bottomdirection"></div>
<p>
<div class="leftdirection"></div>
<p>
<div class="topdirection"></div>
</body>
</html>
参考:http://keleyi.com/a/bjac/j9nnxrqd.htm
用纯css画个三角形的更多相关文章
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
随机推荐
- Angular Input格式化
今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...
- 淘宝code—— 最给力的国内免费SVN(不限语言),异地团队开发、打造个人开源项目不再是梦
相信大家都听说过GitHub,也有很多人在用,但是GitHub毕竟在国外,速度不是很给力,而且安装过程也是很漫长.今天来给大家介绍一个国内的免费的开源项目平台,当然也是一个SVN版本控制器,名字叫ta ...
- MongoDB官网驱动仓库封装
定义IMongoRepositoryBase接口 public interface IMongoRepositoryBase { /// <summary> ...
- linux shell program summary
from:Sep 23 2016 mathematical operation: floating number,bc calculator: we can also use bc in shell ...
- NodeJS系列~第二个小例子,解决中文乱码的问题
返回目录 为了使页面支持的字符更多,所以编码使用UTF-8,注意,你的原js文件的编码也要是utf-8的,可以通过记事本进行编码的修改
- Node.js与Sails~中间查询语言Waterline
回到目录 上讲主要说了如何配置sails的持久化机制,这讲主要说一下实现持久化时的增删改查的语法,在sails里使用了和mongodb风格类似的waterline查询语言,使用简单,语法生动,下面我们 ...
- atitit。企业的价值观 员工第一 vs 客户第一.docx
atitit.企业的价值观 员工第一 vs 客户第一.docx 1. 客户第一的说法是错误的,员工优先是正确的,理念与价值观1 1.1. 任何一个组织,应该组织成员优先级要比外部成员高才对1 1.2. ...
- Atitit 异常的实现原理 与用户业务异常
Atitit 异常的实现原理 与用户业务异常 1.1. 异常的实现原理1 1.2. 用户业务异常1 1.3. 异常转译和异常链2 1.4. 避免异常2 1.5. 异常恢复3 1.6. catch代码块 ...
- asp.net 文件 操作方法
/// <summary> /// 移动文件 /// </summary> /// <param name="oldPath">源文件路径< ...
- angularjs decorator
angularjs decorator https://docs.angularjs.org/guide/decorators decorator() $provide服务提供了在服务实例创建时对其进 ...