三角形繪制方法（及其它圖形）

本文轉載自查看原文 2020-06-11 17:25 519 CSS/CSS3

1.使用boder來繪制

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*這里boder的設置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15             }
16         </style>
17     </head>
18     <body>
19         <div></div>
20     </body>
21 </html>

繪制結果：

2.繪制帶邊框的三角形

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*這里boder的設置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15                position: relative;
16             }
17             div::after {
18                 content: '';
19                 position: absolute;
22                 border-style: solid;
23                 border-color: transparent transparent #ffff7f;
24                 border-width:0 95px 95px;
25                 left: -95px;
26                 top: 3px;    
27             }
28         </style>
29     </head>
30     <body>
31         <div></div>
32     </body>
33 </html>

繪制結果：

3.箭頭

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div {
 8                width: 0;
 9                height: 0;
10                margin: 50px;
11                /*這里boder的設置方向都是上 左右 下 */
12                border-style: solid;
13                border-color: transparent transparent blueviolet;
14                border-width:0 100px 100px;
15                position: relative;
16             }
17             div::after {
18                 content: '';
19                 position: absolute;
20                 border-style: solid;
21                 border-color: transparent transparent #ffffff;
22                 border-width:0 95px 95px;
23                 left: -95px;
24                 top: 5px;    
25             }
26         </style>
27     </head>
28     <body>
29         <div></div>
30     </body>
31 </html>

繪制結果：

4.使用span標簽來繪制，這個方法其實比較簡便，你可以仿照三角形這個來繪制很多圖形，從你的輸入法中獲取到圖形的圖案，實在不行網上也是一堆符號

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .trangle {
 8                 font-size: 200px;
 9                 color: #6495ED;
10             }
11         </style>
12     </head>
13     <body>
14         <span class="trangle">▲</span>
15     </body>
16 </html>

繪制結果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="triangle" height="100" width="100">Triangle</canvas>
 9     </body>
10     <script>
11     var canvas = document.getElementById('triangle');
12     var context = canvas.getContext('2d');
13     
14     context.beginPath();
15     context.moveTo(0, 0);
16     context.lineTo(100, 0);
17     context.lineTo(50, 100);
18     
19     context.closePath();
20     
21     context.fillStyle = "rgb(78, 193, 243)";
22     context.fill();
23     </script>
24 </html>

5.使用canvas繪制，canvas

6.繪制圓形

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1 {
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: #6495ED;
11                 border-radius: 100px;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="div1"></div>
18     </body>
19 </html>

繪制結果：

只要你的radius的長度是你div的一半就行了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 opengl繪制三角形純CSS繪制三角形純css如何繪制三角形_利用border實現畫三角形的原理方法用border或者div制作三角形等圖形 c語言中繪制三角形 python繪制等邊三角形 css繪制三角形原理 Unity3D之Mesh（一）繪制三角形純CSS繪制的三角形箭頭圖案【原創】 OpenTK教程-1繪制一個三角形