25

私が作成したこの形状の左端の 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>

4

7 に答える 7

9

円をいじって、さまざまな効果を得ることもできます。

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

コデペン

残念ながら、多角形と円を組み合わせることができません... または、できるかもしれませんが、私はそれを理解するのに十分なほど遊んでいません. HTH

于 2016-12-13T17:15:25.407 に答える
6

SVG フィルターは、あらゆる種類のclip-path. 親要素に適用するだけです。を調整しstdDeviationて半径を制御します。

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}
<div class="parent">
  <div class="box"></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

関連: https://stackoverflow.com/a/65485455/8620333

于 2020-12-30T08:30:34.503 に答える
1

はい、コメントオプションがないので、回答として書いています..

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

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

ああ、そうです、またはここにコメントする人としてのSVG.. :)

于 2015-08-01T19:48:17.283 に答える