用css写三角形

html部分

<div class="triangle></div>

css部分

.triangle{
  width:0;
  height:0;    　overflow:hidden;　border-width:10px; 兼容IE6　　border-color:transparent transparent #f00 transparent;　　border-style:dashed      dashed      solid    dashed;　　　　　　　　　　　下          左          上       右}

　　

时间： 2024-08-11 03:31:05

用css写三角形的相关文章

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

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

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

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

纯CSS写三角形-border法[晋级篇01] 注意:所有知识点将不考虑IE6 (￣▽￣") (1)有边框的三角形 在上一篇完成简单的三角形border法后,我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角

关于纯css写三角形在firefox下的锯齿问题

相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来: .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ margin:40px auto; position:relative; } 或者: .border

用纯css写三角形

正三角: .sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent transparent red transparent;border-style:dashed dashed solid dashed;} 倒三角: .sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: red transp

css写三角形

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

纯css写三角形

<style>    .triangle_border_up {        width: 0;        height: 0;        border-width: 0 30px 30px 30px;        border-style: solid;        border-color: transparent transparent #333;        /*透明 透明  灰*/    }    .triangle_border_left {        widt

还在为小三角形切图？使用纯CSS写一个简单的三角形

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会