正円と楕円形のCSS
2021.03.29 Mon
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;
}
