先日とあるホームページを作っている時に、デザインと見た目が違うというご指摘をいただきました。
ちなみに、デザインは、次のような感じです。（本当の素材はお見せできないので、適当な仮画像です）
CSSでの表示は四角形が基本
CSSでエレメントの中に文字を入れる場合は、基本的に四角形がベースになります。結婚した教え子から久しぶりに年賀状がきた。 「性が変わりました」と書かれていた。 いまどき、ただの漢字の間違いとは限らない！
shape-outsideを使えないものか？
CSSの最新機能というわけではないですが、あまり使われない「shape-outside」というプロパティを使ってなんとか丸内に文字を表示する方法がないかと考えてみました。shape-outsideの使い方
モノ作りの工場の中で「おれがやらなきゃだれがやる！」という看板があった。それがいつのまにか「だれが」の「が」の点が削られて、「か」に。「おれがやらなきゃだれかやる！」になっていたらしい。
shape-outside:circle();
float:left;
この２つのプロパティを書けば、比較的手軽に丸の外側に沿って表示されます。
でも、やりたいことはコレじゃないんだよな〜。
丸の中に文字を入れ込みたいんですよ。
完成系
そして、四苦八苦しながら出来上がったのが以下のコードです。クリスマスなのに俺にあったかいのは便座だけ。
index.html
<div class="circle-container">
<div class="circle">
<p class="left"></p>
<p class="right"></p>
<p class="text">クリスマスなのに俺にあったかいのは便座だけ。</p>
</div>
</div>
style.css
.circle,.circle *{
white-space:normal;
}
.circle{
--size : 250px;
--padding:20px;
width: var(--size);
height: var(--size);
border-radius:50%;
background: lightblue;
overflow: hidden;
padding:var(--padding);
box-sizing: border-box;
margin:0 auto;
}
.circle *{
box-sizing: border-box;
padding:0;
margin:0;
}
.circle .text{
white-space:pre-wrap;
font-size:1.2em;
}
.circle .left,
.circle .right{
height: 100%;
width: 33%;
}
.circle .left{
float: left;
shape-outside: polygon(
0% 0%,
0% 100%,
100% 100%,
30% 90%,
0% 70%,
0% 30%,
30% 10%,
100% 0%);
}
.circle .right{
float: right;
shape-outside: polygon(
100% 0%,
100% 100%,
0% 100%,
80% 90%,
100% 70%,
100% 30%,
80% 10%,
0% 0%);
}
0 件のコメント:
コメントを投稿