web-dev-qa-db-ja.com

CSSクリップパスを使用するときに角を丸める方法

私が作成したこの形状の左端の3つの角を丸めることができるようにしたいです。

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
<div></div>
csspathclip
15
Eduardo Hernandez

私は最近、このようなアプローチを試すことに成功しました...

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

このアプローチはBFCを作成したり、スティッキーポジションやCSSパースペクティブエフェクトのようなものを壊したりしないため、overflowを非表示に設定してborder-radiusを使用する場合と比較して、これは便利です。また、これにより、svgパスの位置を「挿入」して、必要に応じて「corner-radius」で要素内にクリップすることができます。

6
jonjohnjohnson

サークルをいじって、いくつかの異なるエフェクトを取得することもできます。

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

残念ながら、ポリゴンとサークルを組み合わせることができません...または、できますが、私はそれを理解するのに十分なほど遊んでいません。 HTH

6
J-Roel

はい、コメントオプションはありません。答えとして書いています。

角を丸くするには、できるだけ多くのポイントを書く必要があります。他に何も考えていない...たとえば、下の部分を少し丸めるためのいくつかのポイント：

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

ああ、はい、またはここのコメントの人々としてのSVG .. :)

1
Eugene Kapustin

子要素を使用して、ネストされたclip-pathを子要素と子の疑似要素で実行できます。親は最初にシェイプでpolygonクリップを実行し、次に擬似はellipseで境界を丸めます。クリップには複合効果があります。

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
  <div></div>
</div>

これは、何が起こっているのかを説明するためにいくつかの適応を加えたデモです。

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, yellow 210px);
  margin-top: 15vh;
}

.parent div {
  background-color: blue;
  clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
  <div></div>
</div>

楕円の水平方向のサイズと位置を使用して、エッジに異なる効果を与えることができます。親の背景開始位置は、楕円の配置と同じ値（clip-pathの最後の値）に調整する必要があることに注意してください。これは、右側で切り取られたものをすべて埋めるためです。これは、2番目のデモでbackground-color: blueから.parent divを削除することで視覚化できます。

ここ は、それを試すための追加のCodepenです。

1
Shikkediel