CSS学习之圆、半圆、四分之一圆以及三角形的创建

最新推荐文章于 2024-07-12 14:38:32 发布

qq_45821482

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量1.2k

点赞数 1

文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_45821482/article/details/129037528

版权

本文介绍了如何利用CSS中的border-radius属性来创建不同形状的图形，包括通过设置50%的border-radius创建圆形，调整高度和border-radius制作半圆，以及指定单个border-radius值形成四分之一圆。此外，还展示了通过调整边框颜色透明度来创建三角形的方法。

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

1.圆的创建

下面这段代码用来实现圆的创建

<style>
 div.cri {
            background-color: red;
            width: 200px;
            height: 200px;
         
            border-radius: 50% 50% 50% 50%;
        }
</style>


<body>
 <div class="cri"></div>
</body>

其中border-radius=半径=一半的宽高

50%:是指当前元素的宽高的50%，四个百分之五十分别是指左上、右上、右下、左下的边框弧度

2.半圆的创建

下面这段代码用来实现半圆的创建

div.cri1{
            background-color: blue;
            width: 200px;
            height: 100px;
            border-radius: 100px 100px 0 0;
        }

注意，因为是半圆，所以高度应该设置为宽度的一半，否则将会出现上半是个半圆而下半是个长方形的情况。

3.四分之一圆的创建

同理，若想创建一个四分之一圆，只需设置一个位置的弧度即可

代码如下:

}
        div.cri2{
            background-color: orange;
            width: 100px;
            height: 100px;
            border-radius: 100px 0 0 0;
        }

4.三角形的创建

最后，我们学习一下三角形的创建

首先看一下实现代码

div.squ{
            width: 0;
            height: 0;
            border: 50px solid red;
            border-color: transparent transparent pink transparent;

其中transparent的功能是设置透明颜色，因为其他三个部分的颜色透明了，剩下的就刚好是我们看到的一个三角形