圆形

画出一个圆形相信绝大部分人都会

设置这一个CSS样式属性border-radius: 50%;，表示边框的半径相对于元素宽度的一半。将边框半径设置为50%会使元素变成一个圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
        }
    </style>



</head>
<body>
    <div class="circle"></div>
</body>
</html>

椭圆

椭圆只不过是特殊一点的圆形罢了

圆形是高和宽相等的，椭圆就便是不相等就行了,更改box的宽高即可width: ;height: ;

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

三角形

首先需要我们理解盒子模型

盒子模型一个盒子在页面上占的位置 box-sizing = content内容 + padding + border + margin

利用边框来绘制形状盒子的内容为0 * 0大小，上下左右的边框边距为100px 为了使三角形显现出来，只选择一个方向有背景颜色（bottom、left、right、top），其余都设置为透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid rgb(0, 255, 110);
        }
    </style>

</head>
<body>
    <div class="triangle"></div>
</body>
</html>

扇形

结合三角形和圆形

在三角形的基础上设置这一个CSS样式属性border-radius: 50%;，将边框半径设置为50%

可以设置扇形旋转的角度transform: rotate(45deg);（旋转45度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sector{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid bule;
            border-radius: 50%;
            transform: rotate(45deg);/* 旋转45度*/
        }
    </style>

</head>
<body>
    <div class="sector"></div>
</body>
</html>

梯形

结合三角形和椭圆

在三角形的基础上设置盒子的内容从0 * 0大小，改变至0 * 100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .trapezoid{
            width: 70px;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid red;
        }
    </style>

</head>
<body>
    <div class="trapezoid"></div>
</body>
</html>

CSS基础篇——解决面试简单题，画出椭圆、三角形、扇形、梯形

圆形

椭圆

三角形

扇形

梯形