मैं छवि की तरह एक आकार पाने की कोशिश कर रहा हूँ।

enter image description here

मैं सीमा त्रिज्या सीएसएस का उपयोग करने की कोशिश कर रहा हूं लेकिन मुझे जो कुछ मिलता है वह अर्ध-सर्कल है। कोई भी मेरी मदद कर सकता हैं?

0
Kezern 22 मई 2019, 22:10

1 उत्तर

सबसे बढ़िया उत्तर

इसे बनाने के लिए छद्म तत्व का प्रयोग करें। चाल एक छोटा ओवरलैप होना है और आप उस ओवरलैप को रंग नहीं देते हैं:

.box {
  width:150px;
  height:200px;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  width:70%;
  box-sizing:border-box;
  top:0;
  bottom:0;
  background-color:red;
  background-clip:content-box; /* Don't color the padding */
}
.box:before {
  left:0;
  padding-right:20%; /* (70% - 50%)*/
  border-radius: 150px 0 0 0;
}
.box:after {
  right:0;
  padding-left:20%;
  border-radius: 0 150px 0 0;
}
<div class="box">

</div>

फिर आप दूसरे पक्षों को ओवरफ्लो कर सकते हैं और आपके पास मनचाहा आकार होगा:

.box {
  width:150px;
  height:200px;
  position:relative;
  overflow:hidden;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  width:80%;
  box-sizing:border-box;
  top:0;
  bottom:0;
  background-color:red;
  background-clip:content-box;
}
.box:before {
  left:-10%;
  padding-right:20%;
  border-radius: 150px 0 0 0;
}
.box:after {
  right:-10%;
  padding-left:20%;
  border-radius: 0 150px 0 0;
}
<div class="box">

</div>

एकाधिक पृष्ठभूमि का उपयोग करके यहां एक और विचार है:

.box {
  width:130px;
  height:200px;
  background:
    radial-gradient(circle 90px at -20px             100%, red 98%,transparent 100%) top right/50% 90px,
    radial-gradient(circle 90px at calc(100% + 20px) 100%, red 98%,transparent 100%) top left /50% 90px,
    linear-gradient(red,red) bottom/100% calc(100% - 80px);
  background-repeat:no-repeat; 
}
<div class="box">

</div>
1
Temani Afif 22 मई 2019, 22:30