html – 使用CSS的内圆角底半径
我想创建一个像这样的底部圆角的形状 –
我怎么能用CSS实现这个任务? 解决方法
基于SVG的方法:
CSS可能不是创建此类形状的最佳方式.你应该使用SVG. 1-使用路径元素: 我们可以使用SVG的path元素来创建这个形状,并用一些颜色,渐变或图案填充它. 只有一个属性d用于定义路径元素中的形状.此属性本身包含许多短命令和几个参数,这些命令是这些命令工作所必需的. 下面是创建此形状的必要代码: <path d="M0,0 0,20 Q25,25 50,50 Q75,25 100,25 L100,0 Z" /> 我在路径元素中使用了4个命令.以下是简要说明: > M命令用于定义起点.它出现在开头,并指定绘图应从哪里开始. 工作实例: svg { width: 100%; } <svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none"> <path d="M0,20 Q25,50 Q75,25 L100,0 Z" fill="brown" /> </svg> 2-剪辑: 剪切意味着删除或隐藏元素的某些部分. 在这种方法中,我们使用SVG的clipPath元素定义剪切区域,并将其应用于矩形元素.将隐藏剪切区域之外的任何区域. 以下是必要的代码: <defs> <clipPath id="shape"> <path d="M0,20 Q25,50 Q75,25 L100,0 Z" /> </clipPath> </defs> <rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/> > defs元素用于定义元素/对象以供以后在SVG文档中使用. 工作实例: svg { width: 100%; } <svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none"> <defs> <clipPath id="shape"> <path d="M0,0 Z" /> </clipPath> </defs> <rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/> </svg> 基于CSS的方法: 1-使用具有大箱阴影值的旋转伪元素: >创建2< div>父元素内的元素. 输出图像: 工作实例: .container { position: relative; overflow: hidden; height: 80px; } .left,.right { position: relative; overflow: hidden; height: 100%; float: left; width: 50%; } .right { float: right; } .left:before,.right:before { box-shadow: 0 0 0 150px brown; transform-origin: left bottom; transform: rotate(-3deg); border-radius: 100%; position: absolute; bottom: -70px; height: 100px; content: ''; width: 200%; left: -10%; } .left:before { transform-origin: right bottom; transform: rotate(3deg); right: -10%; left: auto; } <div class="container"> <div class="left"></div> <div class="right"></div> </div> 有用的资源: > CSS3转型:Specs,MDN (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- .net – 用于呈现HTML的流畅界面
- h5输入框提示语 + 正常文本框提示语
- html – CSS / Less / Sass – 在以下情况下匹配每个兄弟姐
- exchange-server – Exchange Web Services(EWS)API“To”别
- 解决微信小程序 flex align-items:center 无法居中的问题
- 微信小程序中进行地图导航功能的实现方法
- 微信小程序如何获取用户session_key,openid,unioni(代码)
- 怎么让div显示一行,其余的隐藏。
- 小程序从本地选择图片或使用相机拍照功能
- html – 使用截断检查渲染的Safari Select-Popup