css:border样式制作几何图形（圆形&三角形）

最新推荐文章于 2024-04-25 18:36:27 发布

苦呀君

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量1.7k

点赞数 2

分类专栏： web前端 # css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43856797/article/details/102871973

版权

前言

html中制作几何图形的方法有很多，canvas，SVG等等。
我们可以运用css的border样式来制作一些常见的几何图形，相对于canvas来说只使用css就能实现，相对于SVG来说便于理解，上手容易。
常见的几何图形总体可以分为两种，一种是有棱角的（多边形）和边为弧线的（圆），稍微复杂一点的类型像星星之类的也可以理解为是这两种类型的拼接而成的。

三角形-border

css制作三角形其实是基于调整容器四条border来实现的，可能平时使用border时四条边的样式基本都是统一的，且粗细基本都很细，并没有发现其中的原理。

先创建一个div，将border设置为很粗，然后将四边都设置不同的颜色，就会发现四条border拼接处都是斜线。

<style>
.box{
    
    width: 50px;
    height: 50px;
    border: 50px solid;
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: yellow;
    border-left-color: blue;
}
</style>
<body>
	<div class="box"></div>
</body>

在这里插入图片描述
如果将box的长度和高度全部设为0，即可以看出每一个border都是一个三角形

这样我们就可以将其他三条边的颜色设置为透明，可以获得到一个三角形

.box{
   
    width: 0;
    height: 0;
    border: 50px solid transparent;/* 设置透明色 */
    border-bottom-color: yellow;
}

在这里插入图片描述
当然可以调节三角形的尺寸，对三角形进行变形，以bottom为底边为例，可以根据下图来进行理解

如果想要不同方向的底边的三角形，举一反三即可

圆形-border-radius

对于制作圆形大部分人应该都了解，通过容器的border-radius属性即添加边框圆角属性，将值设置为50%即可

<style>
.box{
    
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
}
</style>
<body>
	<div class="box"></div>
</body>

在这里插入图片描述
也可以设置容器的大小来做一个椭圆

width: 100px;
height: 50px;

最低0.47元/天解锁文章

苦呀君

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css:border样式制作几何图形（圆形&三角形）

前言html中制作几何图形的方法有很多，canvas，SVG等等。我们可以运用css的border样式来制作一些常见的几何图形，相对于canvas来说只使用css就能实现，相对于SVG来说便于理解，上手容易。常见的几何图形总体可以分为两种，一种是有棱角的（多边形）和边为弧线的（圆），稍微复杂一点的类型像星星之类的也可以理解为是这两种类型的拼接而成的。三角形-bordercss制作三角形其...
复制链接

扫一扫