CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大;

原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形。

复制代码 代码如下:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;

/*border:  50px solid           transparent 两种效果一样*/
  border-bottom: 100px solid red;
}

上下左右的到简单,直接border-后面四个相互变,上面都是border:  50px solid  transparent 即可

复制代码 代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

复制代码 代码如下:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码 代码如下:

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码 代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码 代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

复制代码 代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码 代码如下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

CSS 利用border三角形绘制方法的更多相关文章

  1. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. CSS 三角形绘制方法

    #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 5 ...

  3. CSS利用border绘制图性

    绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px so ...

  4. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  5. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  6. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  7. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  8. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  9. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

随机推荐

  1. Python中的getattr()函数详解

    最近看Dive into python第四章自省中提到getattr()函数,作为一个内建函数平时自己没怎么用过所以也不太理解这个函数的一些用法 看了下函数本身的doc getattr(object, ...

  2. ASP.NET Core会议管理平台实战_3、认证、授权表迁移

    可以参考老张的这个文章: https://www.cnblogs.com/laozhang-is-phi/p/10660403.html 创建这个类库 看一下IdentityUser是在哪一个库下面. ...

  3. Django ORM 那些相关操作

    Django ORM 那些相关操作 一般操作 必知必会13条 <> all(): #查询所有的结果 <> filter(**kwargs) # 它包含了与所给筛选条件相匹配的对 ...

  4. Oracle系统权限列表

    当你新建一个用户,指定表空间之后,这个用户基本上什么都不能做,连接数据库都不可以.你要给这个用户赋各种权限. create session     -----允许用户连接到数据 create tabl ...

  5. ACM-ICPC2018沈阳网络赛 Lattice's basics in digital electronics(模拟)

    Lattice's basics in digital electronics 44.08% 1000ms 131072K   LATTICE is learning Digital Electron ...

  6. react中循环节点的方式以及图片引用的方式

    import React from 'react' import img from '../public/img/001.jpg' // 此时img是一个变量,在下面直接使用该变量即可引入该图片 cl ...

  7. 杭电1003_Max Sum

    这是原题的链接http://acm.hdu.edu.cn/showproblem.php?pid=1003 起初我是利用暴力的方法,求出所有序列的和的情况,每取一个序列就和以知道的最大和作对比,取大者 ...

  8. Spark history server 遇到的一些问题

    最近学习Spark,看了一个视频,里面有提到启动spark后,一般都会启动Spark History Server.视频里把 spark.history.fs.logDirectory 设置成了Had ...

  9. cf791B(完全图&dfs)

    题目链接:http://codeforces.com/contest/791/problem/B 题意:给出一个无向图,问是否满足若存在边ab, bc则存在边ac: 思路:题意即,对于一个点,其所有子 ...

  10. c#之quartz任务调度的使用

    这里讲下,quartz这种任务调度程序的简单使用 这是使用的quartz的3.x 版本 2.x 版本与此稍有区别,可以在网上查看2.x版本教程 使用语言为c# quartz的使用分为几个步骤 创建一个 ...