【CSS】gradientで描く線画囲み枠３種！【雲／キャンディ／リボン】
どうも！LSSです！！
radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。
本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。
もこもこの雲
もこもこの雲
コード
<style>
.crd{
width:300px;
height:200px;
padding:40px;
background:
radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 50% 0/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) calc(100% - 30px) 0/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 50% 0,transparent 94%,black 97%,transparent 100%) 30px 100%/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 50% 0,transparent 94%,black 97%,transparent 100%) 50% 100%/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 50% 0,transparent 94%,black 97%,transparent 100%) calc(100% - 30px) 100%/calc(33.3% - 20px) 30px no-repeat,
radial-gradient(farthest-side at 100% 50%,transparent 94%,black 97%,transparent 100%) 0 30px/30px calc(50% - 30px) no-repeat,
radial-gradient(farthest-side at 100% 50%,transparent 94%,black 97%,transparent 100%) 0 calc(100% - 30px)/30px calc(50% - 30px) no-repeat,
radial-gradient(farthest-side at 0 50%,transparent 94%,black 97%,transparent 100%) 100% 30px/30px calc(50% - 30px) no-repeat,
radial-gradient(farthest-side at 0 50%,transparent 94%,black 97%,transparent 100%) 100% calc(100% - 30px)/30px calc(50% - 30px) no-repeat;
}
</style>
<div class="crd">もこもこの雲</div>
widthとheightの値を変更して全体のサイズを調整しても、横３縦２のもこもこは追従します。
でも極端に比率が違うサイズにすると縦横比が見るに堪えなくなる事も^^;
キャンディ
キャンディ
コード
<style>
.cdy{
width:300px;
height:200px;
padding:40px;
background:
radial-gradient(farthest-side at 50% 100%,transparent 96%,black 98%,transparent 100%) 50% 0/calc(100% - 60px) 30px no-repeat,
radial-gradient(farthest-side at 50% 0,transparent 96%,black 98%,transparent 100%) 50% 100%/calc(100% - 60px) 30px no-repeat,
linear-gradient(to top right,transparent 48%,black 50%,transparent 52%) 0 0/30px 30px no-repeat,
linear-gradient(to top left,transparent 48%,black 50%,transparent 52%) 0 100%/30px 30px no-repeat,
radial-gradient(farthest-side at 0 50%,transparent 90%,black 95%,transparent 100%) 0 0/10px 100% no-repeat,
linear-gradient(to top left,transparent 48%,black 50%,transparent 52%) 100% 0/30px 30px no-repeat,
linear-gradient(to top right,transparent 48%,black 50%,transparent 52%) 100% 100%/30px 30px no-repeat,
radial-gradient(farthest-side at 100% 50%,transparent 90%,black 95%,transparent 100%) 100% 0/10px 100% no-repeat,
linear-gradient(black,black) 30px 50%/1px calc(100% - 100px) no-repeat,
linear-gradient(black,black) calc(100% - 30px) 50%/1px calc(100% - 100px) no-repeat;
}
</style>
<div class="cdy">キャンディ</div>
だいぶ無理がある…？^^;;;
リボン
リボン
コード
<style>
.rbn{
width:300px;
height:150px;
padding:40px;
background:
radial-gradient(farthest-side at 50% 100%,transparent 96%,black 98%,transparent 100%) 50% 0/calc(100% - 60px) 30px no-repeat,
radial-gradient(farthest-side at 50% 100%,transparent 96%,black 98%,transparent 100%) 50% 100%/calc(100% - 60px) 30px no-repeat,
linear-gradient(to top right,transparent 48%,black 50%,transparent 52%) 0 0/30px 30px no-repeat,
linear-gradient(to top right,transparent 48%,black 50%,transparent 52%) 0 100%/30px 30px no-repeat,
radial-gradient(farthest-side at 0 50%,transparent 90%,black 95%,transparent 100%) 0 0/15px calc(100% - 30px) no-repeat,
linear-gradient(to top left,transparent 48%,black 50%,transparent 52%) 100% 0/30px 30px no-repeat,
linear-gradient(to top left,transparent 48%,black 50%,transparent 52%) 100% 100%/30px 30px no-repeat,
radial-gradient(farthest-side at 100% 50%,transparent 90%,black 95%,transparent 100%) 100% 0/15px calc(100% - 30px) no-repeat,
linear-gradient(black,black) 30px 45px/1px calc(100% - 60px) no-repeat,
linear-gradient(black,black) calc(100% - 30px) 45px/1px calc(100% - 60px) no-repeat;
}
</style>
<div class="rbn">リボン</div>
こちらはまだ、結構サイズ変更に耐えられるかも？（指定によっては、paddingもあわせて変更したほうが良かったりする事も。）
あとがき
今回は「線画」という事にしています。
中に塗りを入れると華やかになるかもですが、ものによってはそれが難しい箇所もあったり^^;
発想としては
で、linear-gradientを用いて作った囲み枠、radial-gradientで曲線をまじえるとどうなるかな？というところから何種類か考えてみたものになります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
