今天小編就為大家?guī)硪黄嘘P純CSS實現(xiàn)三角形標記的方法的文章。小編覺得很適合剛學css的朋友，為此分享給大家做個參考。一起來看代碼吧。

公司主營業(yè)務：成都網(wǎng)站設計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出貞豐免費做網(wǎng)站回饋大家。

代碼如下：

CssMark.html

CssMark.css

.TriMarkPre0 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-color: #0058e2;
}
.TriMarkPre1 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}
.TriMarkPre2 {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}
.TriMark {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 5px solid transparent;  
  border-left-color: #0058e2;
}

代碼詳解

創(chuàng)建流程1:

下面的代碼是繪制100 x 100像素區(qū)域的外框的代碼。這是一般代碼。

執(zhí)行結(jié)果圖像頂部的方框?qū)谠摯a。

.TriMarkPre0 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-color: #0058e2;
}

創(chuàng)建過程2：

使用下面的代碼，僅繪制區(qū)域框架的左側(cè)。如果您繪制左側(cè)，您可以看到拐角部分是對角切割的。（當繪制4個邊時，只繪制一半以使每條線不重疊。）

此代碼對應于將執(zhí)行結(jié)果圖像的第二個梯形向側(cè)面的代碼。

.TriMarkPre1 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}

完成:

可以使用以下代碼繪制三角形標記。

通過減小前一行左側(cè)代碼的高度，行之間的部分將消失，它將顯示為三角形標記。

執(zhí)行結(jié)果圖像的第三個圖對應于該代碼。

.TriMarkPre2 {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}

您可以通過減小線的邊框?qū)挾葋砀娜切螛擞浀拇笮　?/p>

執(zhí)行結(jié)果圖像的第四個圖對應于該代碼。

.TriMark {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 5px solid transparent;  
  border-left-color: #0058e2;
}

執(zhí)行結(jié)果：

顯示HTML文件時，將顯示下圖。

補充：

您可以通過更改要繪制的邊框的位置來更改三角形的方向。

代碼如下：

CssMark2.html

CssMark.css

.TriMarkRight {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 15px solid transparent;  
  border-left-color: #0058e2;
}
.TriMarkLeft {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 15px solid transparent;  
  border-right-color: #0058e2;
}
.TriMarkTop { 
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 15px solid transparent;  
  border-bottom-color: #0058e2;
}
.TriMarkBotom {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 15px solid transparent;  
  border-top-color: #0058e2;
}

效果如下：

看完上述內(nèi)容，你們掌握純CSS實現(xiàn)三角形標記的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！