6

を作成しました。そこに作成するdivための css を記述しなければなりません。だから私は、次の画像のようにする必要がありました。border-radiusdivborder-radius

ここに画像の説明を入力

私が書いたCSSコードは以下の通りです。

{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top-right-radius: 6% 60%; 
            border-bottom-right-radius: 6% 60%;

            margin: 10px 0;
            color: #FFFFFF;
            background: -moz-linear-gradient(top,  #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3));
            background: -webkit-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: -o-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: -ms-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            background: linear-gradient(to bottom,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0 );
}

そして、あなたもそれを通り抜けることができますjsfiddle.net

だから、私が2日からこれに固執しているのを助けてください。

4

2 に答える 2

2

border-radius拡張構文を使用して、いくつかの複雑な形状を許可します。例えば：

border-radius:15px 25px 25px 15px / 15px 45px 45px 15px;

この動作については、 http://jsfiddle.net/tDCaA/1/を参照してください。探している方向に向かっていますが、完全には達成されていません。

問題は、さらに微調整してもあまり近くにならないことです。サンプル画像にある直線では、実際にはborder-radius効果がまったく見られません。border-radius設計されているよりも複雑な形状です。したがって、私のアドバイスは、ここで答えとして焦点を当てるのをやめborder-radius、代替案を探すことです.

では、どのような代替手段がありますか？試してみることができるいくつかを次に示します。

  • SVG 画像。この例は、SVG 画像の場合に適しています。タグの末尾にあるホワイト ホールなど、CSS では簡単に実現できない小さなデザイン要素がいくつか含まれているからです。

  • CSS の三角形。タグの最後の部分は、CSS ボーダーのある古い三角形のハックを使用して描画します。ただし、これで角を丸くするのに問題があるかもしれません。

  • 回転。:afterタグの最後の部分として機能する 2 番目の要素を (おそらく CSS セレクターを使用して) 作成します。次に、CSS を使用して 45 度回転させ、必要な形状にします。正直なところ、ローテーションを使用するのはやり過ぎであり、ブラウザーのパフォーマンスにはあまり良くないと考えています。しかし、それはうまくいくはずです。既に回転しているので、他の変換効果を使用して目的の形状に微調整することもできます。

  • CSSborder-image . CSS には、border-image複雑な境界線を作成するために使用できるプロパティもあります。SVG と組み合わせると、これは非常に強力になり、必要なすべての可変形状の境界線を作成できます。最新のブラウザーのほとんどが現在サポートしています ( http://caniuse.com/#search=border-image )。

  • 昔ながらの背景画像。この種のものに単純な png 背景画像を使用することを恐れないでください。上記のすべての手法には適切な場所がありますが、背景画像はうまく機能し、古いブラウザー バージョンとの互換性があります。他の解決策がうまくいかない場合、この種の目的でそれらを使用しても問題はありません。

于 2013-05-07T11:05:59.643 に答える
2

まあ、私は何とか似たようなことをすることができました.クロスブラウザがサポートされているはずです(小さな編集の後):

http://jsbin.com/elubek/1/edit

CSS:

div.wrapper {
  position: relative;
  width: 450px;
}

div.tag {
  width: 400px;
  padding: 3px 10px;
  height: 74px;
  background: -webkit-linear-gradient(top,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
  border-radius: 5px;
  position: absolute;
  top: 0;
  z-index: 120;
}

div.box1 {
  height: 62px;
  width: 62px;
  right: 0px;
  top: 9px;
  border-radius: 10px;
  z-index: -1;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  background: -webkit-linear-gradient(top right,  #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
  float: right;
}

div.circle {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 5;
  border-radius: 100px;
  background: white;
  right: 10;
  top: 35px;
}

p {
  font-family: 'Verdana';
  color: white;
  margin: 0;
}

p.prgress-info { 
  font-size: 25px; 
  letter-spacing: -1px; 
  padding-top: 10px;
}

p.deadline {
  padding-bottom: 19px;
  font-size: 12px;
  font-weight: normal;
}

p.deadline span { font-size: 14px; }

HTML:

  <div class='wrapper'>
    <div class='tag'>
      <p class="prgress-info">003. In progress</p>
      <p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p>
    </div>
    <div class='box1'></div>
    <div class='circle'></div>
  </div>

あなたがthe height/width望む半径を達成するために、div.box1で遊ぶことができます;）

于 2013-05-07T11:17:25.743 に答える