In CSS, wie man ein pralles Quadrat erstellt [Duplikat]
Ist es möglich, dies in reinem CSS zu erreichen, ohne dass ein eingebettetes SVG in Ihrer Seite verwendet werden muss?
Obvs border-radius: 10pxschneidet es nicht ganz.
Antworten
Hier ist ein kurzes Beispiel, in dem wir die oberen und unteren border-radiusBereiche ändern . Wir können den anderen Wert als eine seltsame Art von Höhe verwenden, die die Höhe unseres Radius steuert.
.box {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1em;
}<div class="box">8</div>Nun können wir den Selektor ::beforeund verwenden ::after, um zwei davon zu erstellen:
.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>Nun, ich höre Sie fragen, was ist mit unserer 8? Wo ist es hingegangen? Nun, meine Freunde, es ist tatsächlich hinter unseren seltsamen Platz gegangen. Wir können es in eine Spanne einwickeln und dies stylen, um dies zu beheben.
.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>Wir können auch ein paar Zahlen vertauschen, um es noch perfekter zu machen:
.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>Hoffe das hilft:
.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>