CSS-画三角形、扇形

sunxiaolinlinx

于 2020-08-31 13:59:18 发布

阅读量214

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/sunxiaolinlinx/article/details/108053600

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、三角形

原理就是利用border画，先给border不同的颜色，可以看到一边的边框呈现梯形，

    <style>
        .triangle{
            width:100px;
            height:100px;
            border-color: rosybrown salmon aquamarine sandybrown;
            border-width: 100px;
            border-style: solid;
        }
    </style>
</head>
<body>
  <div>
      <div class="triangle"></div>
  </div>  
</body>

在这里插入图片描述
现在只要把盒子的大小变成0，每一个边框就会变成三角形，这就是大致原理，实现方法千千万，只演示一个。

把盒子的大小变成0：

.triangle{
            width:0;
            height:0;
            border-color: rosybrown salmon aquamarine sandybrown;
            border-width: 100px;
            border-style: solid;
        }

在这里插入图片描述

其他边框变没
transparent 透明，可以把其他边框设为透明，
或者只设置一个边框颜色，左右边框为透明。

 .triangle{
            width:0;
            height:0;
            border-color: rosybrown transparent transparent  transparent;
            border-width: 100px;
            border-style: solid;
        }

在这里插入图片描述

2、扇形

sunxiaolinlinx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-画三角形、扇形

1、三角形原理就是利用border画，先给border不同的颜色，可以看到一边的边框呈现梯形， <style> .triangle{ width:100px; height:100px; border-color: rosybrown salmon aquamarine sandybrown; border-width: 100px; border-s
复制链接

扫一扫

专栏目录