by shigemk2

当面は技術的なことしか書かない

CSSで円を描こう

CSS

HTMLはこう書いて、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Circle</title>
    <link rel="stylesheet" type="text/css" href="./css/circle.css">
  </head>
  <body>
    <div class="circle"><div class="inner-circle"></div></div>
  </body>
</html>

CSSはこう書くと、

.circle {
  border: solid 1px black;
  border-color: black;
  border-radius: 50%;
  height: 200px;
  width: 200px;
}

.inner-circle {
  border: solid 1px black;
  border-color: black;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  position: relative;
  top: 25px;
  left: 25px;
  background-color: white;
}

完成品はこちらです。


参考にしたもの

CSSだけで円を描く方法と、それを使った閉じるボタンの例。（CSS おれおれ Advent Calendar 2012 – 02日目） | Ginpen.com

俺のソースコード

shigemk2/css-cheet · GitHub