首頁  >  文章  >  web前端  >  CSS實作三角形標記的方法介紹

CSS實作三角形標記的方法介紹

不言
不言原創
2018-11-16 11:49:432706瀏覽

本篇文章將跟大家分享關於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;
}

程式碼詳解

建立流程1:

#下面的程式碼是繪製100 x 100像素區域的外框的程式碼。這是一般代碼。

執行結果影像頂部的方框對應於該程式碼。

<div class="TriMarkPre0"></div>
.TriMarkPre0 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-color: #0058e2;
}

建立流程2:

使用下面的程式碼,僅繪製區域框架的左側。如果您繪製左側,您可以看到角落部分是對角線切割的。 (當繪製4個邊時,只繪製一半以使每條線不重疊。)

此程式碼對應於將執行結果影像的第二個梯形向側面的程式碼。

<div class="TriMarkPre1"></div>
.TriMarkPre1 {
  position: static;  
  width: 100px;  
  height: 100px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}

完成:

可以使用以下程式碼繪製三角形標記。

透過減少前一行左側程式碼的高度,行之間的部分將消失,它將顯示為三角形標記。

執行結果影像的第三個圖對應於該程式碼。

 <div class="TriMarkPre2"></div>
.TriMarkPre2 {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 10px solid transparent;  
  border-left-color: #0058e2;
}

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

執行結果影像的第四個圖對應於該程式碼。

<div class="TriMark"></div>
.TriMark {
  position: static;  
  width: 0px;  
  height: 0px;  
  border: 5px solid transparent;  
  border-left-color: #0058e2;
}

執行結果:

顯示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實作三角形標記的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:CSS是什麼下一篇:CSS是什麼