純CSS實現三角形標記的代碼

發(fā)布時間：2020-05-15 11:32:11 來源：億速云閱讀：268 作者：Leah 欄目：web開發(fā)

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

代碼如下：

CssMark.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="CssMark.css" />
  </head>
  <body>
  <div class="TriMarkPre0"></div>
  <br />
  <div class="TriMarkPre1"></div>
  <br/>
  <div class="TriMarkPre2"></div>
  <br />
  <div class="TriMark"></div>
  </body>
  </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í)行結果圖像頂部的方框對應于該代碼。

<div class="TriMarkPre0"></div>

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

創(chuàng)建過程2：

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

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

<div class="TriMarkPre1"></div>

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

完成:

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

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

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

 <div class="TriMarkPre2"></div>

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

您可以通過減小線的邊框寬度來更改三角形標記的大小。

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

<div class="TriMark"></div>

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

執(zhí)行結果：

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

純CSS實現三角形標記的代碼

補充：

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

代碼如下：

CssMark2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="CssMark.css" />
  </head>
  <body>
  <div class="TriMarkRight"></div>
  <br />
  <div class="TriMarkLeft"></div>
  <br />
  <div class="TriMarkTop"></div>
  <br />
  <div class="TriMarkBotom"></div>
  </body>
  </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;
}

效果如下：

純CSS實現三角形標記的代碼

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

向AI問一下細節(jié)

純CSS實現三角形標記的代碼

猜你喜歡

最新資訊

相關推薦

相關標簽