css做三角形的方法

用csss做三角形使用border属性

一.

<head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .div1{            border: 200px solid red;            border-color: transparent transparent black transparent;            width: 0;        }    </style></head><body><div class="div1"></div></body>

或者是

<head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .div1{
             border-top: 10px solid gray;             border-right: 10px solid transparent;             border-bottom: 10px solid transparent;             border-left: 10px solid transparent;             width: 0;        }    </style></head><body><div class="div1"></div></body>

二.用border-radius做椭圆.圆角效果.圆  或者用几个div也可以做圆角效果用css2.0做很麻烦这里也只是提一下三.用background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);可以实现波浪效果;
时间: 09-13

css做三角形的方法的相关文章

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

看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不止一种呢:) 纯 CSS 做三角形的方法,目前我知道三种,分别是利用 border 属性,“◆”字符,和 CSS3 transfrom 做 45 度旋转实现的,CSS3的方法是在码头哥的博客上学到的,很感谢你们的分享,前端有你们更精彩! 1.利用 border 属性实现三角形 这个原理很简单,我我们

纯css做三角形形状

1 /* create an arrow that points up */ 2 div.arrow-up { 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom,

[转]CSS实现三角形的方法

1:border分割线解析 width:40px; height:40px; background:#000; border-width:30px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda; 参照以上代码,按照我的理解,盒模型应该是这样 但是实际上图片是这样的 4个边框是上图4种不同颜色的方框,当然这是我理解的应该是这样,但是事实上不是想象中的那样 为什么呢?这个原因我也纠结了好久 看下上图盒模型,问个问题

纯css做三角形图标

以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px solid #000; width: 0; } 只要这么简单的三行css就可以实现一个三角形!

重新整理:纯CSS写三角形

整理一下几年前写的知识点,关于如何用纯CSS写三角形. 方法1:利用CSS3旋转正方形 知识点: transform:rotate(45deg) 兼容性:FF/Chrome/IE9+ html: <div class="imgbox1"> <img src="images/200x300.jpg" alt="" /> <p>内容文字内容文字内容文字内容文字</p> </div> CSS:

CSS 利用border三角形绘制方法

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

使用CSS border 做三角形 口诀赠上

为了方便用border做三角形,省去那繁琐的思考三角朝向的问题,自己搞了个小口诀,分两篇,一篇是普通的三角,一篇是针对直角三角,口诀如下: 普通篇: 方向朝哪哪边无, 颜色反向来弥补 直角三角篇: 直角三角分两边, 哪侧无值朝哪边, 具体颜色来填充, 要看直角在哪边, 向上直角填上边, 向下直角填下边, top.bottom俩冤家, 从此永远不想见. 针对普通篇的效果如下: 代码如下: .toLeft { width: 0; height: 0; border-width: 30px 50px

纯CSS写三角形-border法[基础篇]

纯CSS写三角形-border法[基础篇] 注意:所有知识点将不考虑IE6 ( ̄▽ ̄") 在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可.但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量.所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量.减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量. CSS3出现以后,“方形旋转45度”制作三角形的

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left