画像に単色の背景などを被せた時に、全ての角を角丸にするCSSです。
下の画像のようにします。デモページもご覧ください。
デモページを見る
やる事としては、角丸にしたい個所に、角丸用の「svg」ファイルを乗せる方法になります。
◆HTMLです。シンプルな記述です。
HTML
<div class="container">
<div><img src="img/dog.jpg"></div>
<div class="ttl">角丸にするCSS</div>
</div>
<div><img src="img/dog.jpg"></div>
<div class="ttl">角丸にするCSS</div>
</div>
◆CSSです。
CSS
.container img {
border-radius: 20px;
}
border-radius: 20px;
}
.ttl {
position: relative;
font-size: 2rem;
width: 50%;
margin: -70px 0 0px;
padding: 30px 0 0px;
background-color: #fff;
border-radius: 0 20px 0 0;
}
.ttl::before, .ttl::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(../img/img_corner.svg);
background-size: 100%;
}
.ttl::before {
top: -20px;
left: 0;
}
.ttl::after {
top: 43px;
right: -20px;
}
パスは任意で変更してください。
CSSもそれほど複雑ではなく、角丸用の「svg」を角丸にしたい個所に疑似要素で乗せています。
数値を変更する事で、角の大きさを変更する事ができます。
角丸にするなら、全ての角を丸くしたいですよね。