使用CSS实现椭圆，三角形，五角星等图形

最新推荐文章于 2025-07-08 15:30:23 发布
原创 最新推荐文章于 2025-07-08 15:30:23 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍了如何使用CSS来创建各种几何图形，包括椭圆、不同类型的三角形、直角三角形、平行四边形、梯形、五角星、六角星、正五边形以及心形等。通过调整border-radius和transform属性，可以实现这些复杂形状的绘制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.椭圆
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
        #ellipse {
            width: 200px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            border-radius: 100px/50px;
            /*-webkit-border-radius: 100px/50px;
            -moz-border-radius: 100px/50px;*/
        }

2.上三角形

        #triangle-up {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }

3.下三角形

        #triangle-down {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }

4.左三角形

        #triangle-left {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid red;
        }

5.右三角形

        #triangle-right {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 100px solid red;
        }

6.左上角是直角的直角三角形

        #triangle-topleft {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
        }

7.右上角是直角的直角三角形

        #triangle-topright {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
        }

8.左下角是直角的直角三角形

        #triangle-bottomleft {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
        }

9.右下角是直角的直角三角形

        #triangle-bottomright {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 100px solid transparent;
        }

10.平行四边形
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

        #parallelogram {
            width: 200px;
            height: 150px;
            margin-left: 30px;
            background: red;
            -webkit-transform: skew(-30deg);
            -moz-transform: skew(-30deg);
            -o-transform: skew(-30deg);
            -ms-transform: skew(-30deg);
        }

11.梯形

        #trapezoid {
            width: 100px;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

12.五角星

        #star-five {
            width: 0;
            height: 0;
            color: red;
            margin: 50px 0;
            position: relative;
            display: block;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            -moz-transfrom:rotate(35deg);
            -webkit-transform:rotate(35deg);
            -ms-transform:rotate(35deg);
            -o-transform:rotate(35deg);
        }

        #star-five:before {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 80px solid red;
            position: absolute;
            top: -45px;
            left: -65px;
            color: white;
            display: block;
            content: "";
            -moz-transform:rotate(-35deg);
            -webkit-transform:rotate(-35deg);
            -ms-transform:rotate(-35deg);
            -o-transform:rotate(-35deg); 
        }

        #star-five:after {
            width: 0;
            height: 0;
            display: block;
            position: absolute;
            color: red;
            top: 3px;
            left: -105px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            content: "";
            -moz-transform:rotate(-70deg);
            -webkit-transform:rotate(-70deg);
            -ms-transform:rotate(-70deg);
            -o-transform:rotate(-70deg);
        }

13.六角星

        #star-six {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            position: relative;
        }
        #star-six:after {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            position: absolute;
            content: "";
            top: 30px;
            left: -50px;
        }

14.正五边形

        #pentagon {
            width: 54px;
            position: relative;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
        }
        #pentagon:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: -85px;
            left: -18px;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
        }

15.心

        #heart {
            width: 100px;
            height: 90px;
            position: relative;
        }

        #heart:before, #heart:after {
            width: 50px;
            height: 80px;
            left: 50px;
            top: 0;
            background-color: red;
            position: absolute;
            content: "";
            -moz-border-radius:50px 50px 0 0;
            border-radius: 50px 50px 0 0;
            -webkit-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
            -webkit-transform-origin:0 100%;
            -ms-transform-origin:0 100%;
            -moz-transform-origin:0 100%;
            -o-transform-origin:0 100%;
            tansform-origin:0 100%;
        }

        #heart:after {
            left: 0;
            -webkit-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
            -webkit-transform-origin:100% 100%;
            -ms-transform-origin:100% 100%;
            -moz-transform-origin:100% 100%;
            -o-transform-origin:100% 100%;
            transform-origin:100% 100%;
        }

16.提示对话框、气泡对话框

        #talkbubble {
            width: 200px;
            height: 100px;
            background-color: red;
            position: relative;
            border-radius: 10px;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            -ms-border-radius:10px;
            -o-border-radius:10px;
        }

        #talkbubble:before {
            width: 0;
            height: 0;
            right: 100%;
            top: 30px;
            position: absolute;
            content: "";
            border-top: 15px solid transparent;
            border-right: 30px solid red;
            border-bottom: 15px solid transparent;
        }

17.钻石

        #diamond {
            width: 50px;
            height: 0;
            border-style: solid;
            border-color: transparent transparent red transparent;
            border-width: 0 25px 25px 25px;
            position: relative;
            margin: 20px 0 50px 0;
        }
        #diamond:after {
            width: 0;
            height: 0;
            top: 25px;
            left: -25px;
            border-style: solid;
            border-color: red transparent transparent transparent;
            border-width: 70px 50px 0 50px;
            position: absolute;
            content: "";
        }
使用css画一个椭圆
王铁柱666的博客
03-13 435
通常用于创建圆角矩形或圆形。为了创建一个椭圆，你可以将一个元素的高度和宽度设置为不同的值，并为其应用。属性分别设置了椭圆的宽度和高度。通过将这些值设置为不同的数值，你可以控制椭圆的形状。属性来创建一个椭圆形状。/* 设置为50%以创建椭圆形状 */，这会将元素转换为一个椭圆形状。属性设置了椭圆的背景颜色。相等，那么将会得到一个圆形。/* 椭圆的背景颜色 */在CSS中，你可以使用。/* 椭圆的宽度 *//* 椭圆的高度 */类定义了一个椭圆形状。
《css揭秘》笔记（七）， 各种各样的椭圆
PeZXO的博客
05-17 346
椭圆椭圆自适应的椭圆半椭圆四分之一椭圆 椭圆 自适应的椭圆 为任何正方形元素设置一个足够大的border-radius，就可以把它变成一个圆： background: #fb3; width: 200px; height: 200px; border-radius: 100px; border-radius指定了我们要得到的圆的半径，但是这一数值在大于一半容器大小的情况下，依然会得到一个圆。 然而我们更希望它能根据其内容自动调整并适应。在这个案例中，我们希望得到一个能依据宽高变形为椭圆或圆的自适应圆。 b
css实现椭圆
weixin_30699741的博客
10-31 194
先实现个简单点的，用css实现一个圆，ok，直接上代码： .circle{ width: 100px; height:100px; background: red; border-radius: 50%; } 实现椭圆的方法 1.利用css3变形 .circle{ width: 100px; height:100px; background...
用CSS画一个圆，椭圆，三角
周五星的博客
03-31 801
怎么用CSS画一个圆，椭圆，三角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
CSS揭秘：9.自适应的椭圆
最新发布
Eighteen Z
07-08 949
本文介绍了如何使用CSS的border-radius属性实现椭圆、半椭圆和四分之一椭圆。通过设置不同的水平和垂直半径值，可以灵活创建各种椭圆形状：圆形只需设置50%的圆角；半椭圆需要将顶部两个角的水平半径设为50%，垂直半径设为100%；四分之一椭圆则让左上角的半径完全占满宽高。文章详细讲解了border-radius的简写语法和各个参数的对应关系，以及如何通过百分比实现自适应效果。这些技巧可以拓展应用于更多复杂形状的实现。
css图形——椭圆
weixin_30836759的博客
01-29 285
在css中，我们也使用border-radius属性来实现椭圆 语法 border-radius:x/y; 说明： x表示圆角的水平半径，y表示圆角的垂直半径。 例如：border-radius:30px相当于border-radius:30px/30px 想要实现椭圆，原理如下：高度和宽度不相等，其中四个圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半 <!...
css写椭圆
有问题可关注公众号：前端研究院 后台输入问题回复
06-21 1437
先在页面中加入一个div 修改width值为200px，然后把border-radius改成100px / 50px; “/”之前的是水平半径，”/”之后的是垂直半径，所以 100px / 50px就让div成了椭圆 border-radius: 100px/50px; 感谢分享 https://jingyan.baidu.com/article/e5c39bf5bbb5e7...
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等
06-12
本文将详细介绍如何用 CSS 实现圆角、三角形、五角星、五边形、爱心、十二角星、八角星、圆形、椭圆形、圆圈以及八卦等图形，并提供具体的代码示例。 #### 二、基础几何图形 ##### 1. 长方形 ```css #Rectangle {...
css 画图（三角、五角星）
06-24
值得注意的是，CSS画图并非只能局限于三角形和五角星，实际上，你可以用CSS绘制几乎任何复杂的图形，如圆形、椭圆、多边形甚至是自定义的矢量图形。关键在于理解CSS的边框、背景、定位、伪元素和transform属性的灵活...
纯CSS3实现绘制各种图形实现代码详细整理
09-25
五角星的实现相对复杂，涉及到多个边框和角度的精确调整，此处仅给出占位符，实际实现可能需要更复杂的CSS代码。 请注意，以上所有示例在现代浏览器中工作良好，包括IE9+、Firefox、Chrome、Safari和Opera。由于...
用CSS轻松绘制各种图形及其实例文件下载
知识点二：绘制五角星 1. 在`shape_star_five.html`文件中，我们使用了`::before`和`::after`伪元素配合`clip`属性来绘制五角星。 2. `clip`属性定义了一个元素的可见区域，通过指定`clip`属性，我们可以只显示元素...
CSS: border-radius绘制椭圆
weixin_39015132的博客
09-03 6403
前言 设计稿中会有一些上圆弧或下圆弧的样式，需要通过border-radius试一试能不能到达我们想要的效果。 开始 一般设计师会标注椭圆的宽（一般都是大于屏幕的）高。圆弧是居中的。例如： 实践 语法描述： border-radius: 1-4 length|% / 1-4 length|%; 一般写法： border-radius: 50%; 等价于： border-radiu...
css椭圆，椭圆边框
weixin_52450702的博客
04-12 9736
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个圆与边框的交集形成圆角效果。 css设置椭圆的方法： 1、给元素添加“ {width:宽度值;height:高度值;}”样式，将元素设置为矩形； 2、给矩形元素添加“ {border-radius:100%;}”圆角样式将其设置为椭圆即可。这种情况如果设置的高和宽是相等的，则图像为圆。 border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性 每
css3画圆和椭圆
li3196672779的博客
06-06 1062
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Document body{ margin: 66px;
使用css实现一个三角形
lm278858445的专栏
07-30 301
利用border绘制 先看一下border的布局，如图： 设置宽度、高度为0 不设置border-top 设置左右border颜色为transparent–透明 调整左border的宽度 同时调整左右border的宽度 总结： 设定的三角形指向方向不设置border 三角线的高由指向方向的反方向的border宽度控制 正交的两个方向的背景颜色为transparent ...
HTML5-画一个简单五角星
紫晶花园-计算机技术分园
03-30 6075
HTML5-画一个简单五角星 Your browser does not support the canvas element.
IOS之Quartz2D绘图2.随机绘制五角星
Steven Chen
07-23 4025
1.   单个五角星绘制 上次讲了在IOS中使用quartz2d绘制基本的图形，今天来绘制一个比较复杂的图形—五角星，五角星大家都很熟悉。 先来分析下五角星的画法，一个五角星如图所示。 1.   先把一个圆周平均五等分，那么每个角度是360/5,然后隔点进行连线就可以绘制五角星 2.   每个连线的夹角就是360/5*2,但是在IOS的正弦余弦计算采用的是弧度制。这里有必要复习下
纯CSS绘制三角形（各种角度）
一直很安静
07-24 807
纯CSS绘制三角形（各种角度）_基础教程_脚本之家 http://www.jb51.net/article/42513.htm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值