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

最新推荐文章于 2024-10-17 18:36:31 发布

苦呀君

最新推荐文章于 2024-10-17 18:36:31 发布

阅读量1.8k

点赞数 2

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

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

版权

本文介绍了如何利用CSS的border样式制作几何图形，包括三角形和圆形。通过调整边框宽度和颜色，可以创建不同形状，如水滴、六角星、五角星等。此外，还展示了如何通过组合三角形制作复杂的图形，如书签收藏图标和红心。

摘要由CSDN通过智能技术生成

前言

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>