सीएसएस में, एक उभड़ा वर्ग बनाने के लिए [डुप्लिकेट]
क्या आपके पृष्ठ में एक एम्बेडेड एसवीजी का उपयोग करने की आवश्यकता के बिना, शुद्ध सीएसएस में इसे प्राप्त करना संभव है।
Obvs border-radius: 10pxयह काफी कटौती नहीं करता है।
जवाब
यहां एक त्वरित उदाहरण है जहां हम शीर्ष और नीचे border-radiusतों को बदलते हैं । हम दूसरे मूल्य का उपयोग एक अजीब तरह की ऊंचाई की चीज के रूप में कर सकते हैं जो हमारे त्रिज्या की ऊंचाई को नियंत्रित करेगा।
.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>उम्मीद है की यह मदद करेगा:
.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>