CSSで次のような形を作りたい

次のような画像をCSSで表現したいのですが、border,box-shadow等を使ってみても描く方法が思いつきませんでした。

イメージとしては、正方形の中一杯に円を描き、その余ったスペースにあたる部分です。

描き方がわかる方がいらっしゃいましたら、ぜひご教示お願いいたします。

追記 : 説明不足でした。この形の中に色を塗りたいので、一つのDIVとして表現したいのです。
（円の部分は透明にするため、四角形のBackgroundに色を塗り、中の丸い部分を違う色で上書きする、という処理はおそらく無理です・・・）

行動規範の内容に同意します

回答2件

コメントのystkさんの方法をコードにしてみました。

.aの大きさがwidth:50px height:50pxだった場合、
.aに疑似要素.a:beforeを設けて倍のサイズ100pxを指定。
そこにborder:50pxを付けてpositionによるマイナスマージン-100pxを設けて右下の１／４だけが重なるように固定。
.aからはみ出る部分をoverflow:hiddenで消せば実現できます。

・・・実現はできますが、実用性・汎用性をもって利用できるかは、周りのコード仕様次第ですかね。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6<style>
7.a {
8  overflow:hidden;
9  position:relative;
10  width:50px;
11  height:50px;
12  background:#c33; /*この色は何色でもOK。透過なら無指定でOK*/
13}
14.a:before {
15  position:absolute;
16  content:"";
17  top:-100px; /*.aの幅高の2倍のpx*/
18  left:-100px;  /*.aの幅高の2倍のpx*/
19  width:100px;  /*.aの幅高の2倍のpx*/
20  height:100px; /*.aの幅高の2倍のpx*/
21  border:50px solid #000; /*.aの幅高と同pxと透過しない部分の色指定*/
22  border-radius:100px;  /*.aの幅高の2倍のpx*/
23  -webkit-border-radius:100px;  /*.aの幅高の2倍のpx*/
24  -moz-border-radius:100px; /*.aの幅高の2倍のpx*/
25}
26</style>
27</head>
28<body>
29<div class="a"></div>
30</body>
31</html>

投稿2017/03/22 05:13

iss

総合スコア506

HTML
1<div class="a">
2    <div class="b"></div>
3</div>

CSS
1.a {
2    width: 200px;
3    height: 200px;
4    border-right: solid;
5    border-bottom: solid;
6}
7
8.b {
9    height: inherit;
10    width: inherit;
11    border-right: solid;
12    border-bottom: solid;
13    border-radius: 100% 0;
14}