用纯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画个三角形的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  6. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  7. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  8. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  9. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

随机推荐

  1. HTTP协议解析

    1. HTTP版本 HTTP/1.0 HTTP/1.1 HTTP-NG 2. 会话方式 HTTP/1.0 建立连接->请求->响应->断开连接 每次连接只处理一次请求和相应,对资源的 ...

  2. ASP.NET Core: 全新的ASP.NET !

    背景 最新版本的 ASP.NET 叫做 ASP.NET Core (也被称为 ASP.NET 5)   它颠覆了过去的 ASP.NET. 什么是 ASP.NET Core? ASP.NET Core ...

  3. java ExecutorService

    ExecutorService 通常Executor对象会创建并管理一组执行Runnable对象的线程,这组线程被称为线程池,Executor基于生产者-消费者模式.提交任务的执行者是生产者(产生待完 ...

  4. vue初体验：实现一个增删查改成绩单

    前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...

  5. iOS-数据持久化-第三方框架FMDB的使用

    FMDB简单介绍 一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了 ...

  6. mybatis多对多映射

    数据库里面有角色实体类app_cms_role

  7. easyuidatagrid中load,reload,loadData的区别。

    摘要:datagrid中有load,reload,loadData那三个方式,皆是加载数据的,但又有差别.下面让我们一起来看看: 首先,load方法,比如我已经定义一个datagrid的id为grid ...

  8. IDEA开发多项目的示例

    前言:慢慢习惯用IDEA了,觉得用起来确实还不错,有VS的感觉,但是缺点就是每次启动慢,如果修改以后反应也需要好久,这方面做得不好.但是职能提示个人觉得要比Eclipse好太多.好了现在我用IDEA来 ...

  9. Spark MLlib - Decision Tree源码分析

    http://spark.apache.org/docs/latest/mllib-decision-tree.html 以决策树作为开始,因为简单,而且也比较容易用到,当前的boosting或ran ...

  10. Uvaoj 10048 - Audiophobia（Floyd算法变形）

    1 /* 题目大意: 从一个点到达另一个点有多条路径,求这多条路经中最大噪音值的最小值! . 思路:最多有100个点,然后又是多次查询,想都不用想,Floyd算法走起! */ #include< ...