web-dev-qa-db-ja.com

純粋なCSSでストローク付きの湾曲した境界線？

CSSのみを使用して（ストロークで）湾曲した境界線を実現することはまったく可能かどうか疑問に思いますか？現時点では、画像を使用してウェブサイトのヘッダーに湾曲した境界線を作成しています。

Curved Border Using Images

これをCSSソリューションに変更して、コンテンツ内のコンテンツの量が変化したときに画像を変更する必要がないようにしたい-これらを動的で応答性のあるものにする必要があり、border-radiusを使用して曲線を描くことができた：

Curved Border Using CSS

これは私にとってははるかにうまく機能しますが、ストロークを追加して、イメージ表現のように見せることができるかどうか疑問に思っていますか？どんな助けでも大歓迎です。これを実現するために私が書いたコードは次のとおりです。

<div class="slider">
  <div class="slide">
    <!-- Content -->
  </div>
</div>

CSS：

.slider {
  background: #21639e;
}
.slider .slide {
  background: url("image.jpg") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
}

border-bottom: 5px solid #fff;を.slideクラスに追加すると、次のようになります。

Curved Border Using CSS with Border

私が達成しようとしていることをテストするための jsfiddle を作成しました。

cssbordercss-shapes
11
Liam McArthur

はい、ボックスシャドウを使用して、この種類の境界線を作成できます。要素の外側に白いボックスシャドウを適用すると、ストローク/境界線のように見えます。

これはborder-bottom: 5px solid #fff;によって異なる種類の効果を生み出します。これは、要素に下ボーダーのみを適用しているためです。左側と右側の境界線は存在しない（zero width）ので、線は細くなります端に近づくにつれて。

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  height: 200px;  
  background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}
<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>

以下は、更新されたバージョンの Fiddle です。

より優雅に見える曲線については、以下の方法を試すこともできます。 .slideよりも幅の広い疑似要素を使用し、画像をその中央に配置します。 （このアプローチにより、元の画像に近づくように感じますが、あなたの選択です）

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.slider .slide:before {
  position: absolute;
  content: '';
  left: -2%;
  top: -6px;
  width: 104%;
  height: 100%;
  background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}
<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>
9
Harry