首页    技术博客    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;
}

推荐阅读
  • json

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • 上传

    基于layUI的图片上传前预览功能的2种实现方式

    基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • vue

    为什么在main.js中写import不会全局生效？

    本文讨论了为什么在main.js中写import不会全局生效的问题，并提供了解决方案。在每一个vue文件中都需要写import语句才能使其生效，而在main.js中写import语句则不会全局生效。本文还介绍了使用Swal和sweetalert2库的示例。 ... [详细]
  • css

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • css

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • css

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • css

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • css

    javascript – 概述在Firefox上无法正常工作

    javascript – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • css

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • css

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • css

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • css

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]
  • css

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • css

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • css

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
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社区 版权所有