css/less画三角形

今天网站的时候忘记三角形怎么画的了,写下这篇博客长点记性;网上有多种实现方式,但我觉得这种最好记;

css如下:

.div{
    width: 0;
    height: 0;
    overflow: hidden; //overflow解决ie6下最小高度的问题
    border-width: 10px;  //决定三角形的大小
    border-color: red transparent transparent transparent;  //那边朝下就把那边设颜色,其余透明
    border-style: solid dashed dashed dashed;  //dashed解决ie6下黑边的方法
}

less如下:(这里是less匹配模式的知识)

.div1(top,@w:10px,@c:red){
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
.div1(@_,@w:10px,@c:red){  //@_的意思是匹配到上面的样式(后面的参数一定要一致);
    width: 0;
    height: 0;
    overflow: hidden;
}

.div{.div1(top);}  //渲染出来就和上方的css一样了
时间: 2024-10-19 09:24:01

css/less画三角形的相关文章

css伪元素before/after和画三角形的搭配应用

想要实现的效果如下: 第一步:如何用css画出三角形? 1 /* css画三角形 */ 2 .sanjiao{ 3 width:0; 4 border-top:40px solid red; 5 border-bottom:40px solid green; 6 border-left:40px solid blue; 7 border-right:40px solid yellow; 8 } 9 10 <div class="sanjiao"> 11 </div&g

用css画三角形

当我们给某个图片做一个弹出层的时候,如果要让我们的弹出层显示一个小箭头,可以用css来画 用div来演示 div{ border:12px solid; berder-color:transparent green transparent transparent; height:0; width:0; } 这样就可以显示一个小三角形

用CSS border相关属性画三角形

效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g

使用CSS画三角形

很多时候我们会遇到需要应用三角形元素的场景,比如一个下拉菜单的交互提示: 或者一个页旁的装饰性标签: 实际上,给页面添加三角形的解决方案有很多,用CSS.SVG.Canvas,甚至用PS画一个贴上去都可以,但是我们在考虑解决方案时一定要选择最优的那个.可以肯定的是,当对三角形的功能需求比较简单和单一的时候,图片是首先被排除的方案.图片的难以维护性为页面的调试和修改都带来了一定的困难,所以当一个问题可以用代码来解决的时候我们一定要首先考虑它.再来考虑Canvas,尽管Canvas相对容易修改,但它

css中border画三角形

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name=&qu

css趣味案例:画三角形

代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画三角形</title> <style> #trip{ width:0px; height:0px; border-top:50px solid white; border-right:50px solid white; border-bot

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

利用css样式画各种图形--初步、进阶、高级(一)

转文请注明:穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形,是个有利有弊的写法,好处是不用画图,且节省了一些流量,坏处是要写长串的css样式,而且有可能流量并没有减少,用与否视情况而定,个人选择. 下面是我做测试的一些图形,也是参考了一些网站,简单的注解一下和归纳了一下,其中并没涉及到复杂的css画图形. 其中用了css3.0的一些属性,所以这里声明:请用支持css3.0的浏览器看此文章! 正方

用纯css写出三角形

1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div>2.把它的宽高设置为height:0px; width:0px;3.设置边框border属性,用来实现三角形.首先要了解border具体是怎么样的,我写了一个这样的样式:border:50px solid #000; border-color:#f00 #000 #f0f #00f;在FF下面显示效果如