CSS3：不可思議的border屬性

weknow619 發(fā)布于2019-08-28 18:05 / 771人閱讀

摘要：原文譯文不可思議的屬性譯者在中，其屬性有很多的規(guī)則。對于一些事物，例如三角形或者其它的圖像，我們仍然使用圖片代替。但是現(xiàn)在就不需要了，我們可以用形成一些基本圖形，我分享了一些關于這方面的技巧。

原文：Magic of CSS border property

譯文：不可思議的CSS border屬性

譯者：dwqs

在CSS中，其border屬性有很多的規(guī)則。對于一些事物，例如三角形或者其它的圖像，我們仍然使用圖片代替。但是現(xiàn)在就不需要了，我們可以用CSS形成一些基本圖形，我分享了一些關于這方面的技巧。

1、正三角形：

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

2、倒三角形：

.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

3、左三角形

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}

4、右三角形

.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

5、十字街效果

.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

1至5的demo演示（為了演示方便，對源代碼改動了一下）：http://jsfiddle.net/rt8cjtwq/embedded/result/

6、方向箭頭（突出效果，改動了源代碼）

CSS：

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  /*float:left;*/
}

.triangle_right
{
  height:0px; width:0px; /*float:left;*/
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

HTML：

效果：

7、制作一個Delicious Logo：

CSS：

.delociousLogo
 {
   height:100px; width:100px;
 }

 .topleft
 {
   height:0px; width:0px;
   border-top:50px solid #FFFFFF;
   border-right:0px solid #FFFFFF;
   border-bottom:0px solid #FFFFFF;
   border-left:50px solid #FFFFFF;
   float:left;
 }

 .topright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #0000CC;
   border-right:0px solid #0000CC;
   border-bottom:0px solid #0000CC;
   border-left:50px solid #0000CC;
 }

 .bottomleft
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #000000;
   border-right:0px solid #000000;
   border-bottom:0px solid #000000;
   border-left:50px solid #000000;
 }

 .bottomright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #999999;
   border-right:0px solid #999999;
   border-bottom:0px solid #999999;
   border-left:50px solid #999999;
 }

HTML：

效果：（左上角的邊框顏色是白色）

原文首發(fā)：http://www.ido321.com/1200.html

云服務器 GPU云服務器 border屬性不可轉入的域名不可使用的郵箱域名兩位數(shù)的域名不可注冊

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/111001.html

CSS3主要內容

摘要：必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。 CSS3主要內容一、CSS選擇器 ? CSS3選擇器規(guī)范地址： https://www.w3.org/TR/2011/RE...? ...

X_AirDu 2019-08-30 11:15 評論0 收藏0
CSS3實戰(zhàn)之一些常用Tips

摘要：本文為部分翻譯文章，主要內容來自于，筆者自身也添加了一些自己的小的。設置自動居中任何一個元素的自動居中可以使用屬性使用逗號分割列表使用負的屬性選擇元素使用作為使用作為圖標可以達到自動縮放的效果。本文為部分翻譯文章，主要內容來自于：css-protips，筆者自身也添加了一些自己的小的Tips。使用:not()屬性為導航添加或者去除邊框傳統(tǒng)的方法是首先為每個li標簽添加標簽： /*...

joywek 2019-08-28 18:19 評論0 收藏0
重溫HTML和CSS3

摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。何為一種腳本語言，是一種動態(tài)類型弱類型基于原型的語言，內置支持類型。二代碼規(guī)范在之前很多開發(fā)人員對的代碼規(guī)范知之甚少，在年至年，許多開發(fā)人員從轉換到。重溫Web前端基礎本篇幅中著重文字，只是記錄一些自己的見解，鞏固下自身基礎網(wǎng)頁結構是什么？結構層 html 導航，列表，段文字，圖片，鏈接，表示層 ...

Taonce 2019-08-29 16:21 評論0 收藏0
重溫HTML和CSS3

摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。何為一種腳本語言，是一種動態(tài)類型弱類型基于原型的語言，內置支持類型。二代碼規(guī)范在之前很多開發(fā)人員對的代碼規(guī)范知之甚少，在年至年，許多開發(fā)人員從轉換到。重溫Web前端基礎本篇幅中著重文字，只是記錄一些自己的見解，鞏固下自身基礎網(wǎng)頁結構是什么？結構層 html 導航，列表，段文字，圖片，鏈接，表示層 ...

objc94 2019-08-02 11:11 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內容在邊界內換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0