web-dev-qa-db-ja.com

凹状の境界半径は可能ですか？

これは単純な凸型の例です。

http://jsfiddle.net/swY5k/

#test{
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}

ただし、凹型の境界半径が必要です。

境界半径を負にしようとしましたが、うまくいきませんでした。

凹面/凸面の例：

enter image description here

csscss-shapes
16
user1637281

背景に放射状のグラデーションを使用して、凹状の境界線の印象を与えることができます。たとえば、次のようなものです。

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

ほとんどのWebkitブラウザーでは、引き続き放射状グラデーションのプレフィックスが必要であり、古いブラウザーを完全にサポートする場合は、古いグラデーション構文も実装する必要がある場合があります。

9
James Holderness

:beforeおよび:after疑似クラスを巧みに使用することで、凹型をシミュレートできます。

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 0 60px 60px 0 / 0 300px 300px 0;
    display: inline-block;
    content: '';
}

#test:after{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 60px 0 0 60px / 300px 0 0  300px;
    display: inline-block;
    content: '';
    position: relative;
    left: 40px;
}

#testdivは単純な長方形です。ただし、その:before要素と:after要素は、背景色（この場合は白）で塗りつぶされた半辺凹面です。

this jsfiddle を参照してください。

12
tessi

SVGは、このような形状を作成するための推奨される方法です。シンプルさと拡張性を提供します。

SVGのパス要素を使用して、上記のような形状を作成し、単色、グラデーション、またはパターンで塗りつぶすことができます。

d要素の形状を定義するために使用される属性pathは1つだけです。この属性自体には、いくつかの短いコマンドと、それらのコマンドが機能するために必要ないくつかのパラメーターが含まれています。

次のコードは凸形状を作成します。

<path d="M 150,25
         Q 115,100 150,175
         Q 185,100 150,25" />

そして、次の1つは、凹型の形状を作成します。

<path d="M 30,25
         L 80,25
         Q 50,100 80,175
         L 30,175
         Q 60,100 30,25" />

以下は、上記のコードで使用されているpathコマンドの簡単な説明です。

  • Mコマンドは、開始点を定義するために使用されます。最初に表示され、描画を開始するポイントを指定します。
  • Lコマンドは、直線を描くために使用されます。
  • Qコマンドは、曲線を描くために使用されます。

出力画像：

Convex and concave shapes

作業デモ：

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="grad">
      <stop offset="0" stop-color="#ddd" />
      <stop offset=".5" stop-color="#fff" />
      <stop offset="1" stop-color="#ddd" />
    </linearGradient>
  </defs>
  <g stroke-width="1" stroke="#000" fill="url(#grad)">
    <path d="M30,25 L80,25 Q50,100 80,175 L30,175 Q60,100 30,25" />
    <path d="M150,25 Q115,100 150,175 Q185,100 150,25" />
  </g>
</svg>

役立つリソース：

以下は、SVGの便利なリンクです。

3
Mohammad Usman

形状を生成するには、疑似要素を使用できます

div {
  height: 250px;
  width: 100px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  left: -25%;
  transition: all 0.8s;
}
div:after {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  right: -25%;
  transition: all 0.8s;
}
div:hover:before,
div:hover:after {
  background: blue;
}
hover the shape to see how it works:
<div></div>
3
jbutler483

border-imageを使用し、境界線にスケーラブルなSVG画像を配置することをお勧めします。

そうすれば、境界線で好きな形にすることができます。 border-radiusが提供する形状に制限する必要はなく、巧妙なハッキングや追加のマークアップも行う必要はありません。

欠点は、border-imageもSVGも古いブラウザ（つまり、古いIEバージョン）ではサポートされていないことです。しかし、もちろん、border-radiusもサポートされていないので、あなたが得る柔軟性と比較して、あなたはこのテクニックで多くを失うことはありません。

2
Spudley

凹型の境界線を作成するには、いくつかの方法があります。そして、私は背景に放射状のグラデーションを使用することを好みます。 https://jsfiddle.net/black_horse/qygmb8z9/

サンプル画像

.single-border{
  height: 50px;
  padding: 20px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background-position:left bottom, right bottom, right top, left top;
    -moz-background-size:51% 51%;
    -webkit-background-size:51% 51%;
    background-size:51% 51%;
    background-repeat:no-repeat;
}


<div class="single-border">
  Single border
</div>
1
Black Horse