纯CSS画基本图形（圆形、三角形、多边形、爱心、八卦）

最新推荐文章于 2023-09-28 16:10:39 发布
最新推荐文章于 2023-09-28 16:10:39 发布
阅读量2k 收藏 9
点赞数 1
分类专栏： 前端学习 文章标签： css 基本图形 圆形 三角形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcx_abc/article/details/78511785
版权

1、正方形
CSS代码如下：

#square{
    width: 100px;
    height: 100px;
    background: red;
}

最终效果：
这里写图片描述

2、长方形
CSS代码如下：

#rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

最终效果：
这里写图片描述

3、圆形
CSS代码如下：

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

最终效果：
这里写图片描述

4、椭圆
CSS代码如下：

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

最终效果：
这里写图片描述

5、上三角
CSS代码如下：

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

最终效果：
这里写图片描述

6、下三角
CSS代码如下：

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

最终效果：
这里写图片描述

7、左三角
CSS代码如下：

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

最终效果：
这里写图片描述

8、右三角
CSS代码如下：

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

最终效果：
这里写图片描述

9、左上三角
CSS代码如下：

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

最终效果：
这里写图片描述

10、右上三角
CSS代码如下：

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

最终效果：
这里写图片描述

11、左下三角
CSS代码如下：

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

最终效果：

12、右下三角
CSS代码如下：

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

最终效果：
这里写图片描述

13、平行四边形
CSS代码如下：

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

最终效果：
这里写图片描述

14、梯形
CSS代码如下：

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

这里写图片描述

15、六角星
CSS代码如下：

#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-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

最终效果：
这里写图片描述

16、五角星
CSS代码如下：

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

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

最终效果：
这里写图片描述

17、五角大楼
CSS代码如下：

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

最终效果：
这里写图片描述

18、六边形
CSS代码如下：

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

最终效果：
这里写图片描述

19、八角形

CSS代码如下：

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;    
    border-bottom: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;    
    border-top: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

最终效果：
这里写图片描述

20、爱心
CSS代码如下：

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

最终效果：
这里写图片描述

21、无穷大符号

CSS代码如下：

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
}

最终效果：
这里写图片描述

22、鸡蛋

CSS代码如下：

#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: red;
   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px             72px;
   border-radius:50% 50% 50% 50% /60% 60% 40% 40%;
}

最终效果：
这里写图片描述

23、食逗人（Pac-Man）

CSS代码如下：

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

最终效果：
这里写图片描述

24、提示对话框

CSS代码如下：

#talkbubble {
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

最终效果：
这里写图片描述

25、12角星

CSS代码如下：

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}

最终效果：
这里写图片描述

26、8角星

CSS代码如下：

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

最终效果：
这里写图片描述

27、阴阳八卦

CSS代码如下：

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

最终效果：
这里写图片描述

我的个人博客地址：http://xiuchundu.github.io/ ，欢迎交流~~大笑。

DCX_abc
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
css3实现画半圆弧线的示例代码
09-24
本篇文章主要介绍了css3实现画半圆弧线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css利用类画三个颜色的盒子
m0_48296211的博客
04-12 416
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> .red{ ...
纯CSS3绘制26个英文字母
火雨(Nick)
03-20 3305
纯CSS3绘制26个英文字母      在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。        网页代码中用到（ ）和Div边距设置和浮动（margin:20px 5px 10px 80px; float: left;）。其中边距Margin四个像素
css 外弧_CSS绘制圆(弧)
weixin_33778479的博客
02-01 3758
1.绘制一个圆使用块元素或行内块元素可以绘制一个矩形，然后添加一个圆角，如果矩形的长宽一样，圆角半径恰好是边长一半，就会得到一个圆形。.div{width:100px;height:100px;background-color:black;border-radius:50px;/*圆角半径等于正方形区域边长一半*/}半径值103050效果2.绘制胶囊形状把上面的方形的一个边长增加即可，也就是说让半...
css实现各种各样的三角形
qq_43614064的博客
11-22 599
css实现各种各样的三角形1. border三角形2. linear-gradient 三角形3.tramform+rotate 实现渐变4.canvas画图三角形 1. border三角形 设置div的width,height均为0，设置四面的border值，想要哪边的三角就设置哪边的border值，把其他边的border值设置为 transparent（透明） css： div { width: 0; height: 0; margin: 10px;
css零碎知识：个人总结
dervish0927的博客
11-28 78
a. 设置透明度：opacity:1.0; b. /*css初始化,所有元素的内边距,外边距为0*/ *｛ margin:0; padding: 0; ｝ c. /*当鼠标悬停在li标签上时，该li标签的子标签div的样式为啥样*/ .shopListli:hover div{ ... } d. /*选择类名为shopList标签的...
css-两种画弧线方法
LinBM123的博客
08-18 1万+
css-两种画弧线方法
利用css样式设置圆形，三角形、梯形和任意弧度的扇形
jwl18236975853的博客
05-10 4013
一：这里简单介绍一下将要用到的css属性 1.1 border-radius 1.1.1 作用 一个指定边框弯曲程度的属性，它的值可以是长度单位，也可以是百分比。当它的值为百分比的时候，代表的实际长度是使用该元素的标签长或者宽对应的长度百分比。border-radius的其它属性和border属性几乎没有差别，这里不再介绍。 1.1.2注意事项 当border-radius被拆开写为border-top-radius的时候，它的值其实可以由两个，会画出一个椭圆行的外边框出来，...
用css画一个半圆弧（以小程序为例）
qq_52181663的博客
09-28 3229
2、两个参数时，第一个参数代表：左上、右下（主对角线） ，第二个参数代 表：右上、左下（副对角线）3、四个参数时、第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下。3、三个参数时、第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下。二、css样式：原理是两个半圆叠在一起，就是一个半圆弧。那么，如何画一个半圆。圆弧的html结构是 两个块级元素嵌套。1、一个参数时，代表四个角都是这个值。
css 实现绘制圆以及一个带圆弧的 需求 实现
才华有限的博客
03-17 980
// 想要得到一个圆,我们可以通过 border-radius 设置. 矩形的的长宽一样 // 圆角半径恰好是 其长度的一半 div{ width:160px; height:160px; background-color: black; border-radius: 80px; } // 半圆->是绘制一个矩形，随意一侧的两个角圆角即可 .div{ width:160px; height:80px;
CSS完成极坐标
AAAAahao_的博客
05-27 367
文章目录前言一、示例二、设计步骤1.纬度2.经度3.卫星（点）三、代码实现总结 前言 项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标，找到示例，虽然满足了部分需求，但是极坐标是由canvs画的，卫星有自己的编号，所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标 提示：以下是本篇文章正文内容，下面案例可供参考 一、示例 上面示例，下面echarts示例 二、设计步骤 1.纬度 几个div，设置.
HTML5 Canvas绘制漂亮的樱花树背景特效
06-11
HTML5 Canvas绘制漂亮的樱花树背景特效，纤细的樱花树开满了樱花，每次刷新页面樱花树的位置与姿态都随机生成。
纯CSS3樱花
06-02
纯CSS3樱花
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
09-25
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下
纯CSS3红色爱心跳动动画.zip_纯CSS3红色爱心跳动动画
09-24
一个纯CSS3的红色爱心跳动动画，爱心的形状是利用纯CSS3绘制出来的，结合CSS3的动画属性实现跳动的动画特效。
D3.js和highcharts,echarts性能对比
热门推荐
DCX_abc的博客
09-30 2万+
前端做数据可视化开发时，经常会用到D3.js、highcharts、echarts这些可视化插件，我就这三者在性能上的区别做一个简单的介绍： (1).Highcharts和echarts是一类东西，但跟d3.js维度不同。假如前面两个能解决你的需求，那么就可以先不考虑d3。英语好highcharts，英语不好选echarts。当然最好要先评估一下它们对浏览器的兼容性，免得写完了发现用户那运行不了。
浅谈常见的target=_blank
DCX_abc的博客
10-11 1万+
常见的html页面经常出现target=”_blank”，尤其发生在为超链接的情况下，所以专门整理了下相关的知识点： 首先target有几个可选值： 1. _blank 链接在新页面打开 2. _parent 链接在父页面打开 3. _self 链接在当前页面打开(默认为_self) 4. _top 链接在最上级页面打开 (1)HTML元素<a href=
vis.js介绍
DCX_abc的博客
09-30 6925
Vis.js是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。该项目包含 DataSet、Timeline, 和 Graph（2d和3d）。 Vis.js是由Almende B.V公司开发的开源项目，基于Canvas绘制web可视化图形图表，简单易用，功能强大。 下面是vis.js的模块： 数据集（DataSet）： 灵活的键/值对，可添加、更
css画一个倒三角形
最新发布
11-16
以下是两种CSS画倒三角形的方法： 1.使用border属性 ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid #000; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值