亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中使用border來創(chuàng)建三角形的基本方法講解

segmentfault   發(fā)布時(shí)間：2016-03-31 11:35:10   作者：quietin   我要評(píng)論
這篇文章主要介紹了CSS中使用border來創(chuàng)建三角形的基本方法講解,文中同時(shí)還附帶了對(duì)HTML5 Canvas和SVG三角形的介紹,需要的朋友可以參考下

比較簡(jiǎn)單實(shí)用的還是使用border來創(chuàng)建三角形，今天主要研究這個(gè)的實(shí)現(xiàn)
將邊框分別設(shè)置為紅/黃/藍(lán)/綠

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     height: 0;   
  3.     width: 0;   
  4.     overflow: hidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  8.     border-style: solid;   
  9.     border-width: 40px 40px 40px 40px;   
  10. }  

效果如下：
2016331113511345.png (88×85)

四個(gè)三角形合成一個(gè)正方形，大小為80x80，如果我們只想保留其中某個(gè)三角形的話，將其它的設(shè)置為透明即可，比如(以下css未改變部分與上面相同)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 transparent transparent transparent;   
  3.     border-width: 40px 40px 40px 40px;   
  4. }  

效果：
2016331113536891.png (91×83)

IE6不支持transparent，所以不會(huì)透明而會(huì)顯示難看的黑色，不過也有解決方法：將透明的部分對(duì)應(yīng)的border-style設(shè)為dashed即可

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 transparent transparent transparent;   
  3.     border-style: solid dashed dashed dashed;   
  4.     border-width: 40px 40px 40px 40px;   
  5. }  

正方形按對(duì)角線平分為兩個(gè)三角形的情況

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 0 0 40px 40px;   
  5. }  
2016331113556112.png (45×45)
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 0 40px 40px 0;   
  5. }  

2016331113615678.png (47×42)

需要指出的是，此時(shí)正方形的大小為40x40

如果將border-width的某一邊設(shè)為0又會(huì)怎么樣呢？也算是兩種情況

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 40px 40px 0 40px;   
  5. }  

2016331113633110.png (88×46)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 40px 40px 40px 0;   
  5. }  

2016331113651034.png (49×87)

結(jié)果是長(zhǎng)方形，其中一邊為80一邊為40。寬度被設(shè)為0的邊框?qū)?yīng)方向的邊框會(huì)形成較大的三角形，且長(zhǎng)度加倍

segmentfault的"采納"的顯示其實(shí)也是用三角形實(shí)現(xiàn)的
2016331113707748.png (42×50)

上部分是包含'采納'兩個(gè)字的塊狀元素，設(shè)置position: relative。下部分用偽類after設(shè)置一個(gè)position: absolute的塊狀元素，將兩者接在一起。通過border-width設(shè)置成長(zhǎng)方形而不是正方形，再將下方的三角形去掉即可，看下面的css十分明顯，這也是三角形的一個(gè)很好的應(yīng)用

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .accepted-flag:after {   
  2.     position: absolute;   
  3.     left: 0;   
  4.     top: 25px;   
  5.     content: '';   
  6.     border-width: 9px 18px;   
  7.     border-style: solid;   
  8.     border-color: #009a61 #009a61 transparent #009a61;   
  9. }  

HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <canvas id="triangle" height="100" width="100">Triangle</canvas>  
這里的如何使用JavaScript繪制一個(gè)三角形：
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var canvas = document.getElementById('triangle');   
  2. var context = canvas.getContext('2d');   
  3.   
  4. context.beginPath();   
  5. context.moveTo(0, 0);   
  6. context.lineTo(100, 0);   
  7. context.lineTo(50, 100);   
  8.   
  9. context.closePath();   
  10.   
  11. context.fillStyle = "rgb(78, 193, 243)";   
  12. context.fill();  

SVG (Scalable Vector Graphics)

這是如何在您的標(biāo)簽，你可以定義一個(gè)內(nèi)聯(lián)SVG三角形：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">  
  2.   <polygon points="0,0 100,0 50,100"/>  
  3. </svg>  

然后，只需添加一些樣式：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .svg-triangle{   
  2.  margin: 0 auto;   
  3.  width: 100px;   
  4.  height: 100px;     
  5. }     
  6.   
  7. .svg-triangle polygon {   
  8.  fill:#98d02e;   
  9.  stroke:#65b81d;   
  10.  stroke-width:2;   
  11. }  

相關(guān)文章

  • 詳解CSS3 用border寫 空心三角箭頭 (兩種寫法)

    本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2017-09-29

  • CSS quiz 帶邊 border 的三角形

    在 twitter 上發(fā)了一條推，給一道 CSS 題給大家做。有幾位同學(xué)給了回答，@zhiyelee 同學(xué)還給出了他的具體實(shí)現(xiàn)方案
    2012-06-27

  • CSS繪制三角形的實(shí)現(xiàn)代碼(border法)

    這篇文章主要介紹了CSS繪制三角形的實(shí)現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-11

最新評(píng)論