5

CSSでこの形状画像を作成する方法はありますか？CSS3は問題なく、IEとの互換性は必要ありません。グラデーションの部分は重要ではありません。右下の曲線で、方法がわかりません。さまざまなjQueryコーナープラグインを見てきましたが、これまでのところうまくいくものはありません。この中のコンテンツは可変長であるため、背景画像を使用できません。

ここに画像の説明を入力してください

編集：返信ありがとうございます、とても印象的です！ただし、画像自体には、右側の曲線を含む全体の周りに青い背景とシームレスな灰色の境界線があります。解決策に余分な要素の境界線半径の「ハック」が含まれている場合、この境界線を維持することはおそらく不可能ですが、これも維持できる場合は、より良いでしょう。

4

3 に答える 3

3

私は少し何かを作成しました。おそらくより良い解決策がありますが、おそらくこれは役に立ちます。

jsFiddle

CSS：

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML：

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>
于 2013-02-13T10:20:26.607 に答える
2

これがシェイプのCSSです。あなたが望むことを達成するためにあなたは複数の形を必要とします。

body{background:white;}

.Shape{margin:20px 30px;}

.Shape1{
  position:relative;
  width:200px;
  height:65px;
  background:blue;
  border-radius:20px;
  border:2px solid white;
  z-index:2;
  top:0px;
  left:0px;}

.Shape2{

  position:relative;
  width:70px;
  height:40px;
  background:blue;
  border-radius:12px;
  border-bottom:2px solid white;
  z-index:3;
  top:-42px;
  left:170px;}

.Shape3{
  position:relative;
  width:20px;
  height:20px;
  background:blue;
  z-index:4;
  top:-64px;
  left:170px;}

.Shape4{
   position:relative;
   width:40px;
   height:46px;
   background:white;
   top:-110px;
   left:202px;
   z-index:3;
   box-shadow:inset 2px 0px 4px lightgray;
   border-bottom-left-radius:40px;}

.Shape5{
  position:relative;
  height:1px;
  width:218px;
  background:transparent;
  box-shadow:0px 0px 8px black;
  left:18px;
  top:-110px;}

.Shape6{
  position:relative;
  height:50px;
  width:20px;
  background:white;
  top:-160px;
  left:236px;
  z-index:4;}

.Shape7{
  position:relative;
  height:10px;
  width:50px;
  background:white;
  top:-210px;
  left:203px;
  z-index:4;}

そしてHTML：

  <div class="Shape">

  <div class="Shape1"></div>
  <div class="Shape2"></div>
  <div class="Shape3"></div>
  <div class="Shape4"></div>
  <div class="Shape5"></div>
  <div class="Shape6"></div>
  <div class="Shape7"></div>

  </div>

これが出力のJsBinです。

于 2013-02-13T10:30:28.787 に答える
0

単一のDOMオブジェクトで標準のCSSを使用して境界線を丸めることはできませんが、CSSを使用して要素を追加することでそれを行うことができます。

これを行う秘訣は、CSS:beforeと:afterセレクターを使用して、メイン要素の両側に追加の要素を効果的に作成し、適切なものを使用border-radiusしbackgroundて、それに合うように形作ることです。

簡単ではありませんが、タブに使用するのは非常に一般的なトリックになっています。たとえば、優れたチュートリアルについては、ここを参照してください。

お役に立てば幸いです。

于 2013-02-13T10:33:09.840 に答える