首页 > 代码库 > 利用CSS3中transparent实现三角形及三角形组合图

利用CSS3中transparent实现三角形及三角形组合图

2024-08-16 19:58:26   220人阅读

??如何绘制三角形及三角形的组合图案，以下是自己画的草图

技术分享

源码如下

技术分享 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS利用transparent实现三角形状绘制</title>
 6     <style type="text/css">
 7         .triangle-up {
 8             width: 0;
 9             height: 0;
10             border:solid 40px #00aabb;
11             border-left: solid 20px transparent;
12             border-right: solid 20px transparent;
13             border-top: 0;
14         }
15         .triangle-left {
16             width: 0;
17             height: 0;
18             border:solid 40px #00aabb;
19             border-top: solid 20px transparent;
20             border-bottom: solid 20px transparent;
21             border-left: 0;
22         }
23         /*梯形绘制*/
24          .tripzoid-triangle {
25             width: 250px;
26             height: 0;
27             border:solid 40px #bb0090;
28             border-left: solid 20px transparent;
29             border-right: solid 20px transparent;
30             border-top: 0;
31         }
32         /*直角三角形绘制*/
33         .right-triangle {
34             width: 0;
35             height: 0;
36             border-right: 100px solid #00aabb;
37             border-bottom: 100px solid transparent;
38         }
39         /*长条矩形与三角形*/
40         .rectangle-triangle {
41             width:240px;
42             height: 0;
43             border:solid 40px #037753;
44             border-left: solid 20px transparent;
45             border-right: solid 20px transparent;
46         }
47 
48     </style>
49 </head>
50 <body>
51     <div class="triangle-up">向上</div>
52     <div class="triangle-left">向左</div>
53     <div class="tripzoid-triangle">梯形绘制</div>
54     <div class="rectangle-triangle">长条矩形与三角形组合</div>
55     <div class="right-triangle">直角三角形</div>
56 </body>
57 </html>
View Code

 利用伪类实现矩形+三角形组合

技术分享 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>利用伪类实现矩形+三角形组合</title>
 6     <style type="text/css">
 7         /*::before ::after绘制三角形*/
 8         .middle {
 9             text-align: center;
10         }
11         .title {
12             background-color: #00aabb;
13             color:#fff;
14             display: inline-block;
15             width: 240px;
16             height: 45px;
17             line-height: 45px;
18             font-size: 18px;
19             position: relative;
20         }
21         .title:before {
22             width: 0;
23             height: 0;
24             border-left: solid 45px transparent;
25             border-top: solid 22.5px red;
26             border-bottom: solid 22.5px red;
27             position: absolute;
28             left: -45px;
29             content: "";
30         }
31 
32         .title:after {
33             width: 0;
34             height: 0;
35             border-right: solid 45px transparent;
36             border-top: solid 22.5px red;
37             border-bottom: solid 22.5px red;
38             position: absolute;
39             left: 240px;
40             content: "";
41         }
42 
43     </style>
44 </head>
45 <body>
46     <div class="middle">
47         <h5 class="title">恭喜发财</h5>
48     </div>
49 </body>
50 </html>
View Code

利用CSS3中transparent实现三角形及三角形组合图


联系
我们