純CSS實現(xiàn)三角形標(biāo)記的代碼-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十年品質(zhì)，值得信賴！

代碼如下：

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í)行結(jié)果圖像頂部的方框?qū)?yīng)于該代碼。

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

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

創(chuàng)建過程2：

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

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

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

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

完成:

可以使用以下代碼繪制三角形標(biāo)記。

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

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

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

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

您可以通過減小線的邊框?qū)挾葋砀娜切螛?biāo)記的大小。

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

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

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

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

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

純CSS實現(xiàn)三角形標(biāo)記的代碼

補充：

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

代碼如下：

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實現(xiàn)三角形標(biāo)記的代碼

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

當(dāng)前文章：純CSS實現(xiàn)三角形標(biāo)記的代碼-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article24/djjoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、云服務(wù)器、網(wǎng)站排名、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

純CSS實現(xiàn)三角形標(biāo)記的代碼-創(chuàng)新互聯(lián)