web-dev-qa-db-ja.com

CSS付きの半円（境界線、アウトラインのみ）

私はCSSで円を作成しようとしていますが、これは次の図のようになります：

enter image description here

...divが1つだけの場合：

<div class="myCircle"></div>

CSSのみ定義を使用します。 SVG、WebGL、DirectX、[...]は許可されていません。

完全な円を描き、その半分を別のdivでフェードインしようとしましたが、機能しますが、よりエレガントな代替品を探しています。

htmlcsscss-shapes
57
Dyin

border-top-left-radius および border-top-right-radius プロパティを使用して、ボックスの高さ（および追加された境界線）に従ってボックスの角を丸めることができます。

次に、ボックスの上部/右側/左側に境界線を追加して、効果を実現します。

どうぞ：

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

WORKING DEMO.

または、 box-sizing: border-box をボックスに追加して、境界線とパディングを含むボックスの幅/高さを計算することもできます。

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更新されたデモ。 （デモ背景色なし）

78
Hashem Qolami

私はずっと前に同様の問題を抱えていましたが、これが私がそれを解決した方法でした

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>
7
mariomc

私は達成するためにパーセント法を使用します

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
3
朱钰鹏