html - एक div पर असमान गोल पक्षों का निर्माण कैसे करें?



css css-shapes (1)

आप clip-path विचार कर सकते हैं

.box {
  height: 200px;
  width: 200px;
  background: blue;
  -webkit-clip-path: circle(75% at 65% 10%);
  clip-path: circle(75% at 65% 10%);
}
<div class="box">

</div>

या radial-gradient उपयोग करें

.box {
  height: 200px;
  width: 200px;
  background: radial-gradient(circle at 65% 10%, blue 75%,transparent 75.5%);

}
<div class="box">

</div>

या border-radius साथ एक छद्म तत्व का उपयोग करें और अतिप्रवाह पर भरोसा करें

.box {
  height: 200px;
  width: 200px;
  position:relative;
  overflow:hidden;
}
.box:before {
 content:"";
 position:absolute;
 top:0;
 left:-10%;
 right:-10%;
 bottom:10%;
 background:blue;
 border-radius:0 0 50% 100%;
}
<div class="box">

</div>

और एसवीजी समाधान को न भूलें (एक नियमित तत्व या पृष्ठभूमि के रूप में)

svg {
 display:inline-block;
}

.box {
  display:inline-block;
  height:200px;
  width:200px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'  width='200' height='200' fill='blue'> <path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' /></svg>")0 0/100% 100% no-repeat;
}
<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  width='200' height='200'
  fill='blue'>
  <path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' />
</svg>

<div class="box">
</div>

यहाँ एसवीजी http://jxnblk.com/paths/?d=M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z आसानी से समायोजित करने के लिए एक अच्छा ऑनलाइन टूल है।

आप mask-image पर भी विचार कर सकते हैं:

.box {
  height: 200px;
  width: 200px;
  background:blue;
  -webkit-mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);
  mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);

}
<div class="box">

</div>

यहां radial-gradient समाधान के लिए एक और वाक्यविन्यास है at जिसके उपयोग के बिना सफारी में समर्थित नहीं है

.box {
  height: 200px;
  width: 200px;
  background: 
    radial-gradient(circle, blue 60.5%,transparent 61%) 35% 100%/200% 200% no-repeat;
}
<div class="box">

</div>

मैं इस तरह असमान गोल पक्षों के साथ एक DIV बनाने की कोशिश कर रहा हूँ:

मैंने कुछ समाधानों की जाँच की है और सीमा-त्रिज्या का उपयोग करके मैं इसके लिए निकटतम हो सकता हूं। मैंने उपयोग किया है:

border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px; 

और यही मुझे मिला है:

यह कैसे किया जा सकता है?





rounded-corners