【推荐】生成各种形状样式CSS代码！！！

最新推荐文章于 2024-04-06 14:59:13 发布
最新推荐文章于 2024-04-06 14:59:13 发布
阅读量843 收藏 10
点赞数 1
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JaveWong/article/details/120972062
版权

目录

1、圆形

2、正方形

3、长方形

4、圆角形

5、椭圆形

6、三角形

7、左三角形

8、右三角形

9、上三角形

10、下三角形

11、左上三角形

12、右上三角形

13、左下三角形

14、右下三角形

15、平行四边形

16、梯形

17、菱形

18、五边形

19、星形

20、六边形

21、八边形

22、心形

23、无穷符号

1、圆形

.cssshape {
    width: 180px;
    height: 180px;
    background: #f335f7;
    -moz-border-radius: 90px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
}

2、正方形

.cssshape {
    width: 180px;
    height: 180px;
    background: #f335f7;
}

3、长方形

.cssshape {
    width: 260px;
    height: 180px;
    background: #f335f7;
}

4、圆角形

.cssshape {
    width: 180px;
    height: 180px;
    background: #f335f7;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

5、椭圆形

.cssshape {
    width: 200px;
    height: 100px;
    background: #f335f7;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

6、三角形

.cssshape {
    width: 0;
    height: 0;
    border-bottom: 140px solid #f335f7;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

7、左三角形

.cssshape {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #f335f7;
    border-bottom: 70px solid transparent;
}

8、右三角形

.cssshape {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #f335f7;
    border-bottom: 70px solid transparent;
}

9、上三角形

.cssshape {
    display:inline-block;
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom:50px solid #f335f7;
}

10、下三角形

.cssshape {
    display:inline-block;
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-top:50px solid #f335f7;
}

11、左上三角形

.cssshape {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #f335f7;
    border-right: 50px solid transparent;
}

12、右上三角形

.cssshape {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #f335f7;
    border-left: 50px solid transparent;
}

13、左下三角形

.cssshape {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid #f335f7;
    border-right: 50px solid transparent;
}

14、右下三角形

.cssshape {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid #f335f7;
    border-left: 50px solid transparent;
}

15、平行四边形

.cssshape {
    width: 160px;
    height: 100px;
    background: #f335f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

16、梯形

.cssshape {
    height: 0;
    width: 180px;
    border-bottom: 180px solid #f335f7;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

17、菱形

.cssshape {
    width: 180px;
    height: 180px;
    background: #f335f7;
    /* Rotate */    
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */    
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

18、五边形

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

19、星形

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

20、六边形

.cssshape {
    width: 100px;
    height: 55px;
    background: #f335f7;
    position: relative;
    margin: 10px auto;
}
.cssshape:before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #f335f7;
}
.cssshape:after{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #f335f7;
}

21、八边形

.cssshape {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}
.cssshape:before{
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
}
.cssshape:after{
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
}

22、心形

.cssshape {
    position: relative;
}

.cssshape:before,
.cssshape:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: #f335f7;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -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%;
}

.cssshape: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%;
}

23、无穷符号

.cssshape {
    width: 220px;
    height: 100px;
    position: relative;
}

.cssshape:before,
.cssshape:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #f335f7;
    -moz-border-radius: 50px 50px 0;
    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);
}

.cssshape: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);
}

Jave2108
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS样式生成器
06-22
CSS样式生成器<br>CSS样式生成器
images2css:从现有的精灵图像生成 css
06-26
images2css generate css from the existing sprite images 使用 var kalok = images2css({ folderPath: "" imageRelativePath: "../", backgroundSize: true }); fs.writeFile(path.join(process.cwd(), "kalok.css"), kalok); 参数说明： folderPath String 类型，需要遍历的图片目录，只遍历一层目录，不会遍历深层子目录，默认值： process.cwd() imageRelativePath String 类型，background-image 的 url 相对路径，默认值： "./" backgroundSize Boolean 类型，CSS 中是否需要带上
CSS 基础入门：从零开始构建专业级网页样式
m0_73442777的博客
06-17 2553
进入创意的CSS世界！我们的文章将带你探索CSS基础，为你的网页设计提供强大的视觉效果和布局控制。无论你是初学者还是有经验的开发者，我们的指南将为你提供从选择器到盒模型的详尽解析。学习如何运用CSS样式来改变字体、颜色和背景，以及如何创建响应式的网页布局。从这里开始你的CSS之旅，将你的网页设计提升到一个全新的水平。准备好发挥创意并让你的网页脱颖而出了吗？让我们一起深入CSS基础的世界，开启无限可能！
css实现基础几何图形
weixin_34088583的博客
08-19 134
　　我们知道，css3通过border-radius、animation、transform等“新”特性可以绘制很多精致的图形。比如腾讯企鹅Logo、超能陆战队中的大白机器人、太阳系、小黄人、叮当猫、安卓机器人、苹果图标等等。 　　这些图形看似实现起来挺复杂，但它们通常都是由矩形、圆形、椭圆、三角、梯形等基本图形组合而成的。所以我们先从基本图形入手，等熟悉之后，实现复杂图形就成为可能了。 ...
10个CSS生成工具
最新发布
2401_84091544的博客
04-06 843
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题能力的考察。
前端必备：五大css自动化生成网站（稀有级别！）
小淼淼的博客
01-06 1万+
前端必备：五大css自动化生成网站（稀有级别！）
使用 CSS 轻松实现高频出现的各类奇形怪状按钮
Yvette Lau的专栏
11-22 693
背景在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解...
分享 19 个免费好用的 CSS 代码样式生成器工具
m0_67846661的博客
05-26 3471
文章标签：pythoncsshtmljavajavascript 版权 整理编辑 |杨小爱 CSS 生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分 CSS 效果，如阴影、边框、按钮颜色/形状等等。 在本文中，我将分享 19个实用的 CSS代码生成器，每个开发人员都会发现它们在他们的日常工作中很有用。 01、Neumorphism.io 地址：https://neumorphism.io/#e0e0e0 有了它，我们可以立即为设计页面快速生...
50款CSS工具
weixin_30301183的博客
08-14 190
50款CSS工具，包含，CSS网格和布局工具，CSS 优化工具，CSS 菜单生成工具，CSS 按钮生成器，CSS 圆角生成器，CSS 框架，CSS Sprites生成器，CSS 排版工具以及 CSS 表单生成器。 网格和布局 The 1KB CSS Grid 新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板，轻巧易用。 Variable Grid System 基于 9...
19个免费好用的CSS代码样式生成器工具
web前端开发
05-18 8777
整理编辑 |杨小爱CSS 生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分 CSS 效果，如阴影、边框、按钮颜色/形状等等。在本文中，我将分享 19个实用的 CSS 代码生成器，每个开发人员都会发现它们在他们的日常工作中很有用。01、Neumorphism.io地址：https://neumorphism.io/#e0e0e0有了它，我们...
懒人css3样式代码生成器-一款懒人的样式生成代码工具
springmvc_springdata的专栏
09-01 1686
懒人css3样式代码生成器-一款懒人的样式生成代码工具 源代码下载地址：http://www.zuidaima.com/share/1607130326682624.htm
CSS 样式的创建
热门推荐
TK_Lumi的博客
08-16 1万+
CSS 样式的创建一、样式表的插入的方法二、外部样式表1.简介2.案例三、内部样式表1.简介2.案例三、内联样式1.简介2.案例 一、样式表的插入的方法 插入样式表的方法有三种: 外部样式表 内部样式表 内联样式 二、外部样式表 1.简介 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部 2.案例 <head> <link rel="st
HTML+CSS样式表快速生成器
04-04
HTML+CSS样式表快速生成器
CSS自定义鼠标显示的形状
05-26
CSS自定义鼠标显示的形状，CSS自定义鼠标显示的形状
CSS学习之五 定位布局
12-03
元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来
24年烟花HTML代码
12-22
这段代码可能会包含一系列的HTML元素（如div、span等）以及CSS样式，用于控制烟花的形状、颜色、移动速度、爆炸范围等视觉效果。通过调整这些参数，开发者可以根据需要定制出不同风格的烟花效果。
css入门笔记
05-15
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...
HTML5 canvas生成图片马赛克效果.zip
07-03
HTML5 canvas生成图片马赛克效果是一款使用HTML canvas来将图片制作成马赛克效果的js插件...该马赛克插件可以使用canvas生成各种形状的像素马赛克，并将图片按照其颜色深度用不同颜色的马赛克进行渲染，效果十分逼真。
socializer:一个CSS库，可轻松创建最终的社交媒体按钮
05-03
共有6种按钮形状，8种悬停样式，5种文本样式，3种布局类型，17种边框，背景和阴影样式= 12240种不同的自定义设置。 参见下面的类名。 支持垂直图标 支持浮动共享栏（垂直和水平）。 支持更多菜单 支持自定义图标...
生成一段css美化的爱心样式的页面
09-11
下面是一段使用 CSS 美化爱心样式的页面代码： ``` <!DOCTYPE html> .heart { width: 100px; height: 90px; position: relative; margin: 100px auto; } .heart:before, .heart:after { content: "";...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值