具有两个圆形边的 CSS 透明弯曲形状 [英] CSS transparent curved shape with two rounded sides

查看：34
本文介绍了具有两个圆形边的 CSS 透明弯曲形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建内部弯曲的透明形状，就像这样

但是我在创建这种弯曲形状时遇到了麻烦，这就是我所做的`

body {背景色:#00a4ffb3；}.parent_wrapper {高度:250px；宽度:250px；位置:相对；背景颜色:白色；}.tab 指示器 {位置:绝对；背景色:#000000；宽度:50px；高度:60px；边框半径:50px 0 0 50px；z-索引:1；变换:translateY(0px);右:0px；过渡:转换 0.3 秒的缓出；}.tab-indicator .tab-indicator-left,.tab-indicator .tab-indicator-right {背景色:#000000；高度:25px；宽度:25px；位置:绝对；}.tab-indicator .tab-indicator-left {右:0；底部:-24px；}.tab-indicator.data-white .tab-indicator-left:after,.tab-indicator.data-white .tab-indicator-right:after {背景色:#F3F3F3；}.tab-indicator .tab-indicator-left:after {宽度:100%；高度:100%；边距顶部:1px；}.tab-indicator .tab-indicator-left:after,.tab-indicator .tab-indicator-right:after {内容: "";显示:块；背景色:#F3F3F3；}.tab-indicator .tab-indicator-left:after {边界半径:0 25px 0 0；}.tab-indicator .tab-indicator-left,.tab-indicator .tab-indicator-right {背景色:#000000；高度:25px；宽度:25px；位置:绝对；}.tab-indicator .tab-indicator-right {右:0；顶部:-24px；}.tab-indicator .tab-indicator-right:after {宽度:100%；高度:100%；边距顶部:-1px；}.tab-indicator .tab-indicator-right:after {边框半径:0px 0px 25px 0px;}

<div class="tab-indicator data-white" style="transform: translateY(25px);"><div class="tab-indicator-left"></div><div class="tab-indicator-right"></div>

另一个使用 mask 的想法，以防您想考虑随机背景.只需将背景放置在蒙版定义中:

.box {宽度:200px；高度:200px；-webkit-掩码:径向渐变(左上角 100% 50%，透明 98%，#fff 100%)顶部 0 右侧 0/30px 50px，径向渐变(右下角 100% 50%，#fff 98%，透明 100%)上 0 右 30px/30px 50px，径向渐变(左下角 100% 50%，透明 98%，#fff 100%)顶部 50px 右侧 0/30px 50px，径向渐变(100% 50% 在右上角，#fff 98%，透明 100%)顶部 50px 右 30px/30px 50px，线性梯度(#fff，#fff)；-webkit-mask-composite:destination-out;面具复合:排除；-webkit-mask-repeat: 不重复；背景:线性渐变(红色，蓝色)；}身体 {背景:粉红色；}

使用 SVG 语法

.box {--w:60px;/*曲线的宽度*/--h:100px;/*曲线的高度*/--t:0px;/*从顶部偏移*/宽度:150px；高度:150px；显示:内联块；-webkit-掩码:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64'height='64'preserveAspectRatio='none'fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z'/></svg>") 顶部 var(--t) 右 0/var(--w) var(--h),线性梯度(#fff,#fff) 顶部/100% var(--t),线性梯度(#fff,#fff) 底部/100% calc(100% - var(--h) - var(--t)),线性梯度(#fff,#fff) 左/calc(100% - var(--w)) 100%;面具:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64'height='64'preserveAspectRatio='none'fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z'/></svg>") 顶部 var(--t) 右 0/var(--w) var(--h),线性梯度(#fff,#fff) 顶部/100% var(--t),线性梯度(#fff,#fff) 底部/100% calc(100% - var(--h) - var(--t)),线性梯度(#fff,#fff) 左/calc(100% - var(--w)) 100%;-webkit-mask-repeat: 不重复；掩码重复:不重复；背景:线性渐变(红色，蓝色)；}身体 {背景:粉红色；}

<div class="box"></div><div class="box" style="--t:20px;--w:50px;--h:80px"></div><div class="box" style="--t:20px;--w:80px;--h:130px"></div>

I'm trying to create inner curved transparent shape,like this

but i have trouble with creating this kind of curved shape,this is what i am done`

body {
  background-color: #00a4ffb3;
}

.parent_wrapper {
  height: 250px;
  width: 250px;
  position: relative;
  background-color: white;
}

.tab-indicator {
  position: absolute;
  background-color: #000000;
  width: 50px;
  height: 60px;
  border-radius: 50px 0 0 50px;
  z-index: 1;
  transform: translateY(0px);
  right: 0px;
  transition: transform .3s ease-out;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-left {
  right: 0;
  bottom: -24px;
}

.tab-indicator.data-white .tab-indicator-left:after,
.tab-indicator.data-white .tab-indicator-right:after {
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  width: 100%;
  height: 100%;
  margin-top: 1px;
}

.tab-indicator .tab-indicator-left:after,
.tab-indicator .tab-indicator-right:after {
  content: "";
  display: block;
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  border-radius: 0 25px 0 0;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-right {
  right: 0;
  top: -24px;
}

.tab-indicator .tab-indicator-right:after {
  width: 100%;
  height: 100%;
  margin-top: -1px;
}

.tab-indicator .tab-indicator-right:after {
  border-radius: 0px 0px 25px 0px;
}

<div class="parent_wrapper">
  <div class="tab-indicator data-white" style="transform: translateY(25px);">
    <div class="tab-indicator-left"></div>
    <div class="tab-indicator-right"></div>
  </div>
</div>

https://jsfiddle.net/vis143/s9oz31df/1/

but the background is not transparent (means i just want to see the background color[ie,blue color])..

is any way to do this using svg or css .... please help

解决方案

Here is an idea using radial-gradient

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}

<div class="box">
<div class="top"></div>
</div>

To better understand the trick here is the curved shape alone with different colors:

.top {
  height:100px;
  width:100px;
  position:relative;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, red 98%,blue 100%) right,
    radial-gradient(100% 50% at bottom right, purple 98%,green 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
  outline:2px solid;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}

<div class="top"></div>

And here is an SVG solution where I will simply replace the gradient with an SVG

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64' height='64' preserveAspectRatio='none' fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>");
  background-size:100% 100%;
}
body {
  background:pink;
}

<div class="box">
<div class="top"></div>
</div>

You can optimize the code and use only one element:

.box {
  width:200px;
  height:200px;
  background:
    radial-gradient(100% 50% at top     left, #fff 98%,transparent 100%) top 0    right 0   /30px 50px,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) top 0    right 30px/30px 50px,
    radial-gradient(100% 50% at bottom  left, #fff 98%,transparent 100%) top 50px right 0   /30px 50px,
    radial-gradient(100% 50% at top    right, transparent 98%,#fff 100%) top 50px right 30px/30px 50px,
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 100px),
    linear-gradient(#fff,#fff) left  /calc(100% - 60px) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box">
</div>

And with the SVG:

.box {
  width:200px;
  height:200px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64' height='64' preserveAspectRatio='none' fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top right/60px 100px,
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 100px),
    linear-gradient(#fff,#fff) left  /calc(100% - 60px) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box">
</div>

You can add some CSS variable to control everything easily:

.box {
  --w:60px;  /*width of the curve */
  --h:100px; /*height of the curve */
  --t:0px;   /*offset from top */

  width:150px;
  height:150px;
  display:inline-block;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64' height='64' preserveAspectRatio='none' fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box" style="--t:20px;--w:50px;--h:80px"></div>

<div class="box" style="--t:20px;--w:80px;--h:130px"></div>

Another idea using mask in case you want to conside a random background. Simply place the background inside the mask definition:

.box {
  width:200px;
  height:200px;
  -webkit-mask:
    radial-gradient(100% 50% at top     left, transparent 98%,#fff 100%) top 0    right 0   /30px 50px,
    radial-gradient(100% 50% at bottom right, #fff 98%,transparent 100%) top 0    right 30px/30px 50px,
    radial-gradient(100% 50% at bottom  left, transparent 98%,#fff 100%) top 50px right 0   /30px 50px,
    radial-gradient(100% 50% at top    right, #fff 98%,transparent 100%) top 50px right 30px/30px 50px,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}

body {
  background:pink;
}

<div class="box">
</div>

With the SVG syntax

.box {
  --w:60px;  /*width of the curve */
  --h:100px; /*height of the curve */
  --t:0px;   /*offset from top */

  width:150px;
  height:150px;
  display:inline-block;
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64' height='64' preserveAspectRatio='none' fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 64 64' width='64' height='64' preserveAspectRatio='none' fill='white'><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box" style="--t:20px;--w:50px;--h:80px"></div>

<div class="box" style="--t:20px;--w:80px;--h:130px"></div>

这篇关于具有两个圆形边的 CSS 透明弯曲形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆