首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

如何使用CSS创建“梨形”形状

作者：HE-KILL-MY-EGO | 来源：互联网 | 2022-10-15 09:05
如何解决《如何使用CSS创建“梨形”形状》经验，为你挑选了1个好方法。

我想用CSS创建此形状。

我已经尝试过使用边界半径，但是我不能完全像上面那样。

这是我能提出的最接近边界半径属性的 小提琴

.mybox {
  background-image: linear-gradient(to top, #7158FB, #925FE0);
  width: 245px;
  height: 320px;
  border-top-left-radius: 60% 75%;
  border-top-right-radius: 60% 75%;
  border-bottom-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 30%;
}

Temani Afif.. 5

使用2种不同的元素来制作它，您会得到更好的理解：

.box {
  width: 245px;
  height: 320px;
  position: relative;
  z-index:0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  background-image:linear-gradient(to right,#7158FB, #925FE0);
  z-index:-1;
}

.box:before {
  top: 0;
  height: 180%;
  right: -16.5%;
  left: -16.5%;
  background-size:100% 32.5%;
  background-repeat: no-repeat;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.box:after {
  bottom: 0;
  height: 42%;
  left: 0;
  right: 0;
  border-bottom-right-radius: 50% 80%;
  border-bottom-left-radius: 50% 80%;
  border-top-right-radius: 4px 25px;
  border-top-left-radius: 4px 25px;
}

对于随机梯度，您必须调整如下代码：

.box {
  --h:320px;
  width: 245px;
  height: var(--h);
  position: relative;
  z-index:0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  background-image:linear-gradient(30deg,red,green,blue);
  z-index:-1;
}

.box:before {
  top: 0;
  height: calc(var(--h) * 1.8);
  box-sizing:border-box;
  padding-bottom:calc((1.8 - 1 + 0.42) * var(--h));
  right: -16.5%;
  left: -16.5%;
  background-size:100% calc(100%/1.8);
  background-clip:content-box;
  background-repeat: no-repeat;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.box:after {
  bottom: 0;
  height: calc(var(--h) * 0.42);
  left: 0;
  right: 0;
  border-bottom-right-radius: 50% 80%;
  border-bottom-left-radius: 50% 80%;
  border-top-right-radius: 4px 25px;
  border-top-left-radius: 4px 25px;
  background-size:100% calc(100%/0.42);
  background-position:bottom;
}



1> Temani Afif..：

使用2种不同的元素来制作它，您会得到更好的理解：

.box {
  width: 245px;
  height: 320px;
  position: relative;
  z-index:0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  background-image:linear-gradient(to right,#7158FB, #925FE0);
  z-index:-1;
}

.box:before {
  top: 0;
  height: 180%;
  right: -16.5%;
  left: -16.5%;
  background-size:100% 32.5%;
  background-repeat: no-repeat;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.box:after {
  bottom: 0;
  height: 42%;
  left: 0;
  right: 0;
  border-bottom-right-radius: 50% 80%;
  border-bottom-left-radius: 50% 80%;
  border-top-right-radius: 4px 25px;
  border-top-left-radius: 4px 25px;
}

推荐阅读
  • css

    利用 VTK Glyph3D 实现三维数据的符号化可视化

    vtkGlyph3D 是一种强大的符号化可视化工具，能够将三维数据集中的每个点用预定义的几何图形（如球体或箭头）进行表示。该工具不仅支持自定义符号的方向和缩放比例，还能够在复杂的数据场中突出显示关键特征，从而提高数据的可解释性和可视化效果。通过这种方式，用户可以更直观地理解和分析三维数据集中的重要信息。 ... [详细]
  • json

    MongoVUE基础操作指南：轻松上手数据库管理

    MongoVUE基础操作指南：轻松上手数据库管理
    本文介绍了MongoVUE的基础操作，旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具，虽然需要注册，但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法，并对一些常见的问题进行了修正和补充，确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • json

    PHP开发人员薪资水平分析：工程师平均工资概况

    PHP开发人员薪资水平分析：工程师平均工资概况
    PHP开发人员薪资水平分析：工程师平均工资概况 ... [详细]
  • json

    遍历集合过程中应避免执行修改操作以防止引发ConcurrentModificationException异常

    在遍历集合的过程中，若需根据特定条件对集合进行修改操作，如添加或删除元素，应特别注意避免引发 `ConcurrentModificationException` 异常。例如，在当前场景中，当集合中的对象ID与另一个集合中的对象ID不匹配时，需要向集合中添加新元素。为了避免这一异常，建议使用迭代器的 `remove` 方法或采用线程安全的集合类型，如 `CopyOnWriteArrayList`，以确保操作的安全性和一致性。 ... [详细]
  • json

    如何在Mac上构建高效的本地服务器环境

    如何在Mac上构建高效的本地服务器环境
    在Mac上构建高效的本地服务器环境，首先需要了解基本步骤：1. 配置目录基础；2. 启动Apache服务；3. 添加自定义文档至本地服务器；4. 查看自定义效果。此外，还可以通过手机或其他电脑访问本机服务器，以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具，本文将详细介绍每个步骤的具体操作方法。 ... [详细]
  • json

    CAS 机制下的无锁队列设计与实现

    CAS 机制下的无锁队列设计与实现 ... [详细]
  • json

    JavaScript 中变量前的加号（+）符号代表什么含义及作用解析

    在 JavaScript 中，变量前的加号（+）符号用于将变量转换为数字类型。例如，在 `if (+valueDistance) {}` 语句中，加号的作用类似于 `Number(valueDistance)`，会根据 Number 函数的规则将变量转换为数值或 NaN。这种用法常用于确保变量在进行数值运算时不会出现类型错误。 ... [详细]
  • json

    【Linux进阶指南】第一阶段第三课：体验与部署Ubuntu系统

    【Linux进阶指南】第一阶段第三课：体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前，本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练，你将掌握Ubuntu的基本安装、配置及常用命令，为后续的进阶学习打下坚实的基础。此外，课程还将介绍如何解决常见问题和优化系统性能，帮助你更加高效地使用Ubuntu。 ... [详细]
  • focus

    jQuery插件验证与屏幕键盘功能的集成解决方案

    jQuery插件验证与屏幕键盘功能的集成解决方案
    本文介绍了一种集成了验证功能和屏幕键盘的jQuery插件解决方案。该插件不仅提供了强大的表单验证功能，还引入了一个高度可定制的屏幕键盘，以增强用户体验。通过这一集成方案，开发者可以轻松实现复杂的表单验证逻辑，并为用户提供便捷的输入方式，特别适用于移动设备或特殊输入场景。 ... [详细]
  • dom

    通过 NuGet 获取最新版本的 Rafy 框架及其详细文档

    通过 NuGet 获取最新版本的 Rafy 框架及其详细文档
    为了帮助开发者更便捷地使用Rafy领域实体框架，我们已将最新版的Rafy框架程序集上传至nuget.org，并同步发布了最新版本的Rafy SDK至Visual Studio。此外，我们还提供了详尽的文档和示例，以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]
  • dom

    概率与期望动态规划的深入探讨与应用分析

    概率与期望动态规划的深入探讨与应用分析
    本文深入探讨了概率与期望动态规划的基本原理及其在实际问题中的应用。概率是指某一事件发生的可能性大小，用P(A)表示。若某一事件的所有可能结果共有n种，且每种结果出现的概率相等，而事件A包含其中的m种结果，则该事件的概率P(A)为m/n。例如，在投掷骰子的情况下，如果事件A定义为掷出偶数点，由于共有3种偶数点（2、4、6），而总共有6种可能的结果，因此P(A)为1/2。文章进一步分析了概率与期望动态规划在复杂场景下的建模方法和求解策略，并通过具体实例展示了其在决策优化和风险管理中的应用价值。 ... [详细]
  • node.js

    TypeScript 实战分享：Google 工程师深度解析 TypeScript 开发经验与心得

    TypeScript 实战分享：Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享：Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • dom

    新增用户账户管理功能

    1. 设置用户密码：使用 `slappasswd` 工具生成加密密码，确保账户安全。具体步骤如下：输入命令 `slappasswd -s NewPassword`，系统将提示重新输入新密码，并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件：编辑 `vildapus` 配置文件，添加必要的用户账户信息，以确保新用户能够顺利登录系统。 ... [详细]
  • dom

    虚拟机网络设置与数据库远程连接优化指南

    虚拟机网络设置与数据库远程连接优化指南
    本文针对个人计算机上虚拟机网络配置与数据库远程连接的问题，提供了一套详细的优化指南。在探讨远程数据库访问前，需确保网络配置正确，特别是桥接模式的设置。通过合理的网络配置，可以有效解决因虚拟机或网络问题导致的连接失败，提升远程访问的稳定性和效率。 ... [详细]
  • dom

    【Windows API】按钮控件详解与应用实例

    本文详细介绍了 Windows API 中的按钮控件及其应用实例。主要功能包括：1. `CheckDlgButton` 用于更改对话框中按钮的选中状态；2. `CheckRadioButton` 用于设置单选按钮的选中状态。此外，还探讨了按钮控件在实际开发中的多种应用场景，帮助开发者更好地理解和使用这些功能。 ... [详细]
author-avatar
HE-KILL-MY-EGO
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有