2つの丸い側面を持つCSS透明な湾曲した形状

debugcn 投稿 Dev

ヴィシュヌ・ゴピナス

このような内側の湾曲した透明な形状を作成しようとしています

湾曲形状メニュー

でもこういう曲線の形を作るのに苦労しているので、こうやってやっています `

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/

しかし、背景は透明ではありません（つまり、背景色[つまり青色]を見たいだけです）。

svgまたはcssを使用してこれを行う方法はありますか....助けてください

アフィフに同行

これが使用するアイデアです 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>

ここでの秘訣をよりよく理解するために、さまざまな色の湾曲した形状だけを使用します。

.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>

これがSVGソリューションで、グラデーションを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>

コードを最適化して、使用できる要素は1つだけです。

.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>

そして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>

CSS変数を追加して、すべてを簡単に制御できます。

.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>

maskランダムな背景を検討したい場合に使用する別のアイデア。マスク定義内に背景を配置するだけです。

.box {
  width:200px;
  height:200px;
  -webkit-mask:
    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%;
  mask:
    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%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}

body {
  background:pink;
}

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

SVG構文を使用

.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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-11

コメントを追加

サインイン

分類Dev

湾曲した側面と鋭い角を持つ長方形

分類Dev

2つの丸い側面を持つ三角形

分類Dev

ボーダー湾曲CSS-湾曲した端を持つ円

分類Dev

グラデーションwpfで湾曲した側面を持つボックスを作成する方法

分類Dev

傾斜した側面と丸い角を持つdiv

分類Dev

湾曲した側面を持つカスタムuicollectionviewcellを作成するにはどうすればよいですか？

分類Dev

空白のない角度の付いた側面を持つCSSグリッド

分類Dev

湾曲した斜辺を持つ多角形の三角形

分類Dev

三角形のパスの湾曲した側面？

分類Dev

丸みを帯びた側面と先のとがった角を持つdiv

分類Dev

角が丸く、側面が湾曲したconnect4ボードを作成するにはどうすればよいですか？

分類Dev

はめ込み曲線と透明な背景を持つCSSの形

分類Dev

はめ込み曲線と透明な背景を持つCSSの形

分類Dev

変換を介してcss33dオブジェクトに湾曲した/アーチの側面を追加する

分類Dev

透明なトップを備えた湾曲したdiv

分類Dev

css3を使用した湾曲したキャプション付きの丸みを帯びた画像

分類Dev

背景が透明な場合、片側の湾曲した境界線はまだ反対側に細い線を示していますが、モバイルでのみです-なぜこれが起こるのですか？

分類Dev

2つのdivを別の湾曲した/アーチ型のdivで除算します

分類Dev

CSSを使用してdivの下側を内側に湾曲させる

分類Dev

グラデーションの境界線を持つ透明な丸いボタン

分類Dev

CSSを半透明の2つの形状を1つのように見せるためにどのようにしたらよいですか？

分類Dev

純粋なCSSを使用した湾曲したヘッダー

分類Dev

CSSの湾曲した背景画像

分類Dev

先のとがった側面を持つdivを作成する

分類Dev

OpenCV C ++-不規則な側面を持つ長方形の検出

分類Dev

放物線軌道、つまりCSS変換を使用して湾曲した画像を移動するにはどうすればよいですか？

分類Dev

Flutterの湾曲した形状の背景ヘッダー

分類Dev

行/列の側面を塗りつぶしていない背景色

分類Dev

凹状の湾曲した形のブロブの幅と高さを見つける

Related 関連記事

記事