首頁 > web前端 > html教學 > CSS3实现三角形_html/css_WEB-ITnose

CSS3实现三角形_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:27:59
原創
1005 人瀏覽過

很多时候我们用到三角形这个效果:

  我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的是一个正方形,颜色和定义边框的颜色相同,我们看到正方形其实是这个div边框。

<div id="d1"></div>style:    #d1{        width:0;         height:0;         border:100px solid red;    }
登入後複製

实现效果:

那么这个元素现在对应的每个边框是什么样子的呢?我们来看:

对应代码:

<div id="d1"></div>style:    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:red  blue  black  yellow;<br />             上  右   下   左
登入後複製
}
登入後複製
登入後複製

从上面这个我们发现,其实这个宽高为0的div的每一条边框都是一个三角形,实际操作中我们可能只需要一个三角形,那我们只要把不需要的border隐藏就可以了(用transparent属性):

比如我要一个向下的三角形:

对应代码:

<div id="d1"></div>style:    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:red transparent transparent transparent;<br />             上   右      下      左    }
登入後複製

由此可以看出只是把对应border隐藏掉了,对应的border—color顺序为:

border-color:上 右 下 左; 每个颜色之间用空格隔开。

一个45度三角形:

对应代码:

<div id="d1"></div>style:    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:transparent transparent red red ;<br />     border-color:transparent transparent red blue ;
登入後複製
}
登入後複製
登入後複製

同时我们可以调整对应border的宽度来调整三角形的形状:

  

对应代码:

  我们这里修改了下方border的宽度

<div id="d1"></div>style:    #d1{        width:0;         height:0;        border-width:50px;        border-bottom-width:150px;        border-style:solid;        border-color:transparent transparent red transparent;        border-color:blue green red black;    }      
登入後複製

同时我们也可以绘制一个圆角三角形:

对应代码:

这里为了看起来舒服些,加了透明度属性;

<div id="d1"></div>style:        #d1{        width:0;         height:0;        border-width:50px;        border-style:solid; border-top-left-radius: 15px; opacity: 0.569;        border-color:red transparent transparent red;    }
登入後複製

关于三角形的制作基本就这些,很多时候配合伪类before、after使用会有意想不到的效果:

比如这个我自己编写的登录窗口的标签:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板