ブログ

blog

CATEGORY

正円と楕円形のCSS

CSSで作る正円

CSSサンプル

.txt {
background-color: #FFFFFF;
position: relative;
}
.txt:before {
content: "";
position: absolute;
margin: auto;
display: block;
background-color: #FFFFFF;
left: 0;
border-radius: 10rem;/*正円にする*/
right: 0;
}

CSSで作る楕円形

CSSサンプル

.txt {
background-color: #FFFFFF;
position: relative;
}
.txt:before {
content: "";
position: absolute;
margin: auto;
display: block;
background-color: #FFFFFF;
left: 0;
border-radius: 10rem / 5rem;/*楕円形にする*/
right: 0;
}