首页 > 其他分享> 文章详细

CSS画三角形，圆形，椭圆，圆角长方形

2022-06-28 18:02:10 阅读：208 来源： 互联网

标签：圆角椭圆 solid 50px 100px rgb border CSS

1、CSS画一个三角形：（div宽高为0，border存在且颜色不一）

step1: 设置宽度，高度为 0 的一个div盒子；

step2: 为了方便理解，将盒子的 4 个边框分别设置一样的宽度boder，不同的颜色；

step3: transparent将其他三个边框隐藏掉，就能看到效果了。

如果对三角形的样式有特殊要求：可以通过动画效果来实现: transform : rotate(80deg) 通过旋转实现

2、圆形，椭圆，圆角长方形：

通过改变 border-radius的比例，可以显示不同的图形，比如圆角正方形、圆角长方形

3、效果图：

4、代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
     body { 
         display: flex;
            
        }
        div {
     margin: 50px 50px;
        }
        .step0 {     
            width: 100px;
            height: 100px;
            border-top: solid 20px pink ;
            border-right: solid 20px rgb(118, 118, 5);
            border-bottom: solid 20px green;
            border-left: solid 20px blue;
           
        }

        .step1 {
            width: 0px;
            height: 0px;
            border-top: solid 50px pink ;
            border-right: solid 50px rgb(112, 112, 18);
            border-bottom: solid 50px green;
            border-left: solid 50px blue;
            
        }
        .triangle {
            width: 0px;
            height: 0px;
            border-top: solid 50px   transparent;
            border-right: solid 50px rgb(112, 112, 18);
            border-bottom: solid 50px  transparent;
            border-left: solid 50px  transparent;
            /* 旋转 */
            transform: rotate(80deg);

        }
        /* 画一个圆 */
        .circle{
            width: 100px;
            height: 100px;
            background-color: rgb(21, 138, 216);
            border-radius: 50%;
        }
        /* 画一个椭圆 */
        .ellipse{
            width: 200px;
            height: 100px;
            background-color: rgb(21, 138, 216);
            border-radius: 50%;
        }
        /* 通过改变 border-radius的比例，可以显示不同的图形，比如圆角正方形、圆角长方形 */
     
    </style>
    </head>

    <body>
        <div class="step0">
            有边框的div
        </div>
        <div class="step1">
        </div>
        <div class="triangle">
        </div>
        <div class="circle">
        </div>
        <div class="ellipse">
        </div>
    </body>

</html>

标签：圆角,椭圆,solid,50px,100px,rgb,border,CSS
来源： https://www.cnblogs.com/tianjiu1996/p/16420383.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS画三角形，圆形，椭圆，圆角长方形