摘自http://wchhlt.blog.163.com/blog/static/24401320118152272653/
一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
– 调整宽度大小可以调节三角形形状.
示例1
一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图
#test1 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
示例2
在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.,这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么
示例2_1
#test2 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:transparent transparent transparent #f0eb7a;
border-style:dashed dashed dashed solid;
border-width:20px;
}
示例2_2
#test3 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:transparent transparent #12ad2a transparent;
border-style:dashed dashed solid dashed;
border-width:20px;
}
示例2_3
#test4 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}
示例2_4
#test5 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 #3366ff transparent transparent;
border-style:solid solid dashed dashed;
border-width:40px 40px 0 0 ;
}
分享到:
相关推荐
css border三角形
css border实现Bubble提示框的方法是利用border属性来实现两个三角叠加,实现箭头的方法
CSS Border属性制作小三角,需要的朋友可以参考下。
一、前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容...效果抢鲜下图为使用CSS的border属性实现的三角效果: 复制代码代码如下:.test{width:0; height:0; border-width:20px
/*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*...
尖三角的一般情况下都是使用图片实现的,不过在本文将为大家介绍下使用css border实现,具体的css 写法如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法),非常具有实用价值,需要的朋友可以参考下
使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子;假设有如下代码: <div></div> div { width: 50px; height: 50px; ...
DIV 区块或 span 的边框,也可以应用到其他的网页元素的边框上,例如网页标题的边框、图片的边框(img border)… 等,所有的主流浏览器都支援 CSS border 属性。CSS border 语法介绍: CSS Code复制内容到剪贴板...
利用这个特点,通过设置不同的上下左右边框宽度或颜色,可以得到小三角、梯形等。调整宽度大小可以调节三角形形状。 实现三角形 示例1: CSS Code复制内容到剪贴板 #test1{ height:20px; width:20px; border...
border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在...
NULL 博文链接:https://dodomail.iteye.com/blog/1701776
比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; ...
3、设置边框border属性,用来实现三角形。首先要了解border具体是怎么样的,我写了一个这样的样式:border:50px solid #000; border-color:#f00 #000 #f0f #00f;在FF下面显示效果如下:出现4个三角形合并成一个...
Css画三角形border 加粗。
具体代码如下所示: ... <!--向上的三角--> ...--向下的三角-->...--向左的三角-->...下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border