En CSS, cómo crear un cuadrado abultado [duplicado]
Nov 28 2020
¿Es posible lograr esto en CSS puro, sin necesidad de usar un SVG incrustado en su página?
Obvs border-radius: 10pxno es suficiente.
Respuestas
cornonthecob Nov 28 2020 at 16:43
Aquí hay un ejemplo rápido en el que cambiamos la parte superior e inferior border-radius. Podemos usar el otro valor como un extraño tipo de altura que controlará la altura de nuestro radio.
.box {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1em;
}<div class="box">8</div>Ahora bien, podemos usar el selector ::beforey ::afterpara hacer dos de estos:
.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>Ahora bien, te escucho preguntar, ¿qué pasa con nuestro 8? ¿A dónde se ha ido? Bueno, amigos míos, en realidad se ha ido detrás de nuestro extraño cuadrado. Podemos envolverlo en un lapso y diseñarlo para solucionarlo.
.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>También podemos intercambiar algunos números para que sea aún más perfecto:
.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
Espero que esto ayude:
.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>