CSS에서 불룩한 사각형을 만드는 방법 [중복]
Nov 28 2020
페이지에 포함 된 SVG를 사용할 필요없이 순수한 CSS로이를 달성 할 수 있습니까?
Obvs border-radius: 10px는 그것을 잘랐습니다.
답변
cornonthecob Nov 28 2020 at 16:43
다음은 상단 및 하단 border-radiuses를 변경하는 간단한 예 입니다. 반지름의 높이를 제어하는 이상한 종류의 높이로 다른 값을 사용할 수 있습니다.
.box {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1em;
}<div class="box">8</div>이제 ::before및 ::after선택기를 사용하여 다음 두 가지를 만들 수 있습니다 .
.box::after {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1.75em;
content: "";
display: block;
position: absolute;
top: 2px;
left: 8px;
}
.box::before {
background: #62f;
color: white;
border-radius: 10px / 50%;
padding: 30px;
width: 1.75em;
height: 1em;
content: "";
display: block;
position: absolute;
top: 8px;
left: 2px;
}<div class="box">8</div>이제 우리 8은 어때? 어디로 갔습니까? 글쎄요, 친구들, 그것은 실제로 우리의 이상한 광장 뒤에 있습니다. 우리는 그것을 스팬으로 감싸고 이것을 고칠 수 있습니다.
.box::after {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1.75em;
content: "";
display: block;
position: absolute;
top: 2px;
left: 8px;
}
.box::before {
background: #62f;
color: white;
border-radius: 10px / 50%;
padding: 30px;
width: 1.75em;
height: 1em;
content: "";
display: block;
position: absolute;
top: 8px;
left: 2px;
}
.box > span {
position: absolute;
top: 32px;
left: 36px;
z-index: 5;
color: white;
font-size: 1.5em;
font-family: sans-serif;
}<div class="box"><span>8</span></div>더 완벽하게 만들기 위해 몇 가지 숫자를 바꿀 수도 있습니다.
.box::after {
background: #62f;
color: white;
border-radius: 50% / 20px;
padding: 30px;
width: 1em;
height: 1.75em;
content: "";
display: block;
position: absolute;
top: 2px;
left: 8px;
}
.box::before {
background: #62f;
color: white;
border-radius: 20px / 50%;
padding: 30px;
width: 1.7em;
height: 1em;
content: "";
display: block;
position: absolute;
top: 8px;
left: 2px;
}
.box > span {
position: absolute;
top: 32px;
left: 36px;
z-index: 5;
color: white;
font-size: 1.5em;
font-family: sans-serif;
}<div class="box"><span>8</span></div>ImranRafiqRather Nov 28 2020 at 16:36
도움이 되었기를 바랍니다:
.square{
height:80px;
width:80px;
background:blue;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
border-radius:2rem;
font-size: 2rem;
opacity: 0.5;
box-shadow:-1px 1px 1px 1px #fff;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="square">8</div>
</body>
</html>