W css, jak utworzyć wypukły kwadrat [duplikat]
Nov 28 2020
Czy można to osiągnąć w czystym CSS, bez konieczności używania osadzonego SVG na swojej stronie?
Obvs border-radius: 10pxnie całkiem to znosi .
Odpowiedzi
cornonthecob Nov 28 2020 at 16:43
Oto szybki przykład, w którym zmieniamy górne i dolne border-radiuses. Możemy użyć drugiej wartości jako dziwnego rodzaju wysokości, która będzie kontrolować wysokość naszego promienia.
.box {
background: #62f;
color: white;
border-radius: 50% / 10px;
padding: 30px;
width: 1em;
height: 1em;
}<div class="box">8</div>Teraz możemy użyć selektora ::beforei ::after, aby utworzyć dwa z nich:
.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>Słyszę, że pytasz, a co z naszymi 8? Gdzie to się podziało? Cóż, moi przyjaciele, to faktycznie przeszło za nasz dziwny kwadrat. Możemy zawinąć go w rozpiętość i stylizować, aby to naprawić.
.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>Możemy również zamienić kilka liczb, aby uczynić go jeszcze doskonalszym:
.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
Mam nadzieję że to pomoże:
.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>