html+CSS布局实例：用CSS绘制三角形

The..Fuir

已于 2022-04-03 19:29:51 修改

阅读量344

点赞数 2

分类专栏： css html 面试文章标签： css css3 前端

于 2022-03-16 19:13:31 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/123533372

版权

面试同时被 3 个专栏收录

152 篇文章 48 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

这是关于border元素的理解

原理：一个盒子的宽高为0时，由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图

当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。如图

<div class="triangle">三角形</div>

.triangle{
            /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid #00a3af;
            border-left: 50px solid transparent;    
            /*transparent 表示透明*/
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;
        }

效果图：

只要上下左右中任意两个临近的边框设置颜色，其余边边框设置成透明的就行，

就是使用 transparent（把边框设置成透明）

例如：border-top: 50px solid transparent;

如果你不知道border怎么用,可以去 CSS 简写边框属性 学习一下

我多举几个例子，你可以去VSCode、IDEA、sts等等上去试一下就一目了然了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="square">正方形</div>
    <div class="triangle">三角形</div>
    <div class="triangle1">三角形</div>
    <div class="triangle2">三角形</div>
    <div class="triangle3">三角形</div>
</body>
</html>
<style>
 .square{
            /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid #00a3af;
            border-left: 50px solid rebeccapurple;    /*transparent 表示透明*/
            border-right: 50px solid red;
            border-top: 50px solid yellow;
 }
 .triangle{
            /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid #00a3af;
            border-left: 50px solid transparent;    
            /*transparent 表示透明*/
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;
        }
 .triangle1{
            width: 0px;
            height: 0px;
            border-bottom: 50px solid #00a3af;
            border-left: 50px solid red;    /*transparent 表示透明*/
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;

 }
 .triangle2{
       /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid black;
            border-left: 50px solid transparent;    /*transparent 表示透明*/
            border-right: 50px solid green;
            border-top: 50px solid transparent;
 }
 .triangle3{
       /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            width: 0px;                        
            height: 0px;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;    /*transparent 表示透明*/
            border-right: 50px solid green;
            border-top: 50px solid transparent;
 }
</style>

效果图：

The..Fuir

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+CSS布局实例：用CSS绘制三角形

这是关于border元素的理解原理：一个盒子的宽高为0时，由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。如图 <div class="triangle">三角形</div>.triangle{ /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/ width: 0px; ..
复制链接

扫一扫