Introduction to the method of implementing triangle mark in CSS-CSS Tutorial-php.cn

Introduction to the method of implementing triangle mark in CSS

不言

Release： 2018-11-16 11:49:43

Original

2761 people have browsed it

This article will share with you the method of implementing triangle mark in CSS. The content is very detailed. Friends in need can refer to it.

Without further ado, let’s take a look at the code first~

The code is as follows:

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>

Copy after login

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;
}

Copy after login

Detailed code explanation

Creation process 1:

The following code is the code to draw the outer frame of a 100 x 100 pixel area. This is the general code.

The box at the top of the execution result image corresponds to this code.

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

Copy after login

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

Copy after login

Creation process 2:

Use the code below to draw only the left side of the area frame. If you draw the left side, you can see that the corner part is cut diagonally. (When drawing 4 sides, only draw half so that each line does not overlap.)

This code corresponds to the code that will execute the second trapezoid of the resulting image sideways.

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

Copy after login

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

Copy after login

Complete:

Triangular markers can be drawn using the following code.

By reducing the height of the code to the left of the previous line, the section between the lines will disappear and it will appear as a triangle mark.

The third image of the execution result image corresponds to this code.

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

Copy after login

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

Copy after login

You can change the size of the triangle marker by reducing the border width of the line.

The fourth image of the execution result image corresponds to this code.

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

Copy after login

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

Copy after login

Execution results:

When the HTML file is displayed, the following image will be displayed.

Introduction to the method of implementing triangle mark in CSS

Added:

You can change the orientation of the triangle by changing the position of the border you want to draw.

The code is as follows:

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>

Copy after login

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;
}

Copy after login

The effect is as follows:

Introduction to the method of implementing triangle mark in CSS

The above is the detailed content of Introduction to the method of implementing triangle mark in CSS. For more information, please follow other related articles on the PHP Chinese website!