web-dev-qa-db-ja.com

2つの境界線を持つ円

コンテナのサイズに反応するように、2つの境界線で反応する円（div）をスタイル設定するにはどうすればよいですか？

たとえば、次のような円があるとします。

circles with 2 borders

サークルの動作するCSSは次のとおりです。

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}
<div class="circle"></div>

2色の境界線を追加するにはどうすればよいですか？アウトラインを試しましたが、長方形として出てきました。サークルdiv内に別のdivを配置して背景色を使用しようとしましたが、内側のdivを垂直に揃えることができません。

csscss-shapes
23
jjei

次のHTMLを使用することをお勧めします。

<div></div>

CSS：

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}
<div></div>

JS Fiddle demo 。

box-shadowは最も外側の色の輪を提供し、borderは白い「内枠」を提供します。

または、box-shadowをinsetキーワードとともに使用し、box-shadowを使用して 'inner-border'を生成し、borderを最も外側の境界として使用することもできます。 ：

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid red;
    box-shadow: inset 0 0 0 5px white;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid red;
  box-shadow: inset 0 0 0 5px white;
}
<div></div>

JS Fiddle demo 。

明らかに、あなた自身の好みや状況に合わせて寸法を調整してください。

ただし、box-shadowを使用して最も外側の境界線を生成すると、複数の境界線（次の例では赤と白を交互に使用）が許可されます。

div {
    width: 20em;
    height: 20em;
    margin: 20px;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}

div {
  width: 20em;
  height: 20em;
  margin: 20px;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}
<div></div>

JS Fiddle demo 。

41
David Thomas

このスレッドにはすでに2つの非常に良い答えがありますが、考えられるすべてのアプローチでこのスレッドをより完全にするためのいくつかのアプローチがあります。これらによって生成される出力も応答性があります。

擬似要素を使用：

親よりもサイズが小さい擬似要素を使用して、絶対に親内に配置できます。背景を擬似要素に追加し、親に境界線を追加すると、境界線と背景の間に隙間があるように見えます。ギャップを透明にする必要がある場合、親にbackgroundを追加する必要はありません。ギャップを単色にする必要がある場合（つまり、2番目の境界線のように見える必要がある場合）、その色の境界線と必要な幅を疑似要素に追加する必要があります。

このアプローチを使用している間、内側の領域は、塗りつぶし（背景）として画像またはグラデーションを持つこともできます。

.circle {
  position: relative;
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
}
.circle:after {
  position: absolute;
  content: '';
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  border-radius: inherit;
  background: brown;
  z-index: -1;
}
.circle.white:after {
  top: 0px;
  left: 0px;
  border: 4px solid white;
}
.circle.image:after {
  background: url(http://lorempixel.com/200/200/abstract/4);
}

/* Just for demo */

div {
  float: left;
  margin-right: 10px;
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}
body {
  background: url(http://lorempixel.com/500/500/nature/3);
  background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>

放射状グラデーションの使用：

これも可能なアプローチですが、ブラウザのサポートが非常に低いため、お勧めしませんが、このアイデアは他の場所で使用できます。基本的には、radial-gradient（円形）が要素に追加され、無地の背景色と実際の境界線の間に透明または無地のギャップ（余分な境界線）が残されます。

.circle{
  height: 200px;
  width: 200px;
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 50%;
  border: 2px solid brown;
  background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
  background: radial-gradient(circle at center, brown 66.5%, white 68%);
}

/* Just for demo */

div{
  float: left;
  margin-right: 10px;
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}
body{
  background: url(http://lorempixel.com/500/500/nature/3);
  background-size: cover;
}
<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
6
Harry

別のアプローチは、 background-clip プロパティを使用することです。内部の境界線の色を選択することはできませんが、そのギャップの背景を表示します：

circle with a transparent gap inside border

div {
  width: 150px;
  height: 150px;
  padding:2px;
  border-radius: 50%;
  background: #DD4814;
  border: 2px solid #DD4814;
  background-clip: content-box;
  margin:0 auto;
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}
<div></div>

パディング値でギャップサイズを制御することに注意してください。

5
web-tiki

境界線とボックスシャドウで1つの円を描いて外側の円効果を作成するフィドル https://jsfiddle.net/salientknight/k18fmepL/1/ Chrome、Safariでテストおよび動作and Opera-テキストが大きすぎる場合、Firefoxで失敗します。約3文字のフォントサイズ1emの場合、高さと幅が同期しなくなります。 ...

<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>


p.circleBlue{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #159fda;
 border: 5px Solid #fff;
  color: #fff;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
  padding:20px;
   box-shadow: 0px -0px  0px 3px #159fda;
   -webkit-box-shadow: 0px -0px  0px 3px  #159fda;
 -moz-box-shadow: 0px -0px  0px 3px #159fda;
   margin:5px;
}

p.circle:before{
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

updateこれをさまざまなテキストサイズとすべてのブラウザで動作させることができなかったため、jsを追加しました。ここに貼り付けているので、それらはすべて1つの完全なソリューションです。 changesSizesは、高さと幅が常に一致することを確認する関数です...まずどちらが大きいかを確認し、次に両方の値を2つのうちの大きい方に設定します（これらの割り当ての1つは冗長ですが、安心できます） 。最終的な効果は、さまざまな形状やサイズのコンテンツを追加できることです。私が見つけた唯一の本当の制限は味です。

   changeSizes(".circleBlue");
   //changeSizes(".circleGreen");
   //changeSizes(".circleOrange");

---------        

function changeSizes(cirlceColor){
    var circle = $(cirlceColor);
 circle.each(function(){
   var cw = $(this).width();
   var ch = $(this).height();

   if(cw>ch){
       $(this).width(cw);
       $(this).height(cw);  
   }else{
        $(this).width(ch);
       $(this).height(ch); 
   }
   });
}

Example:

enter image description here

2
Daniel Lefebvre