このボタンの作り方は？

ボタンこのボタンの作り方は？

どのように私はこの形のボタンを作ることができますか？私は右側に "border-radius"を使うことができますが、私は左辺を実装する方法がありません。

出典

2017-05-19 Kevin Cho

の形状であるものボタン？申し訳ありませんあなたのリンクにアクセスすることができません – threeFatCat

ボタンの背景に色が付いているのか、背景のイメージがありますか？ –

@JosephMarikleボタン自体にグラデーションがありますが、画面の背景が画像です。 –

これを行うには、CSS疑似セレクタ::を使用することができます。

そうのような要素を選択して、次のスタイルを追加します。

.button::before { 
    content: ""; 
    width: //whatever you choose to fit 
    height: //whatever you choose to fit 
    background-color: #fff !important; 
    //this will hide the border of the element itself 
    border-radius: //same radius as the element 
    z-index: 9999; //hides the button border 
    border-right: //same width as the element, solid black 
    border-left: 0px; //so it doesnt show 
    border-bottom: 0px; 
    border-top: 0px; 
}

最後には、位置決めされ、私はあなたが正しくそれをどのように配置するかを把握することを信頼しています。これが動作するかどうか私に教えてください。基本的には、ボタン要素の上に座っている、右の境界線のみを表示する円です。

出典

2017-05-19 19:42:15

私はこれをしましたが、私は白のボタンの部分を隠すことができないイメージの背景を持っています。 –

@KevinCho ...そして、あなたは本当にあなたが実際に作業している実際のマークアップとスタイルを表示する必要があります。もう一度尋ねる（新しい質問）が、もっと状況を説明して、人々が働くのに十分なものを示してください。 –

純粋CSS溶液は、通常、背景画像の上に円形の「勾配」の背景画像を追加することからなる：HTML

.round { 
 
     background: 
 
      radial-gradient(circle at 0 50%, rgba(204,0,0,0) 30px, #c00 15px); 
 
      border-top-right-radius:3em; 
 
      border-bottom-right-radius:3em; 
 
    }

<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>

Fiddle

出典

2017-05-19 20:05:59 achref

このボタンの作り方は？

答えて

関連する問題