एक छवि का उपयोग करके सर्किल div बनाने का आसान तरीका?

Question

मैं सोच रहा था कि क्या मैं अब कर रहा हूँ की तुलना में परिपत्र divs बनाने के लिए एक आसान तरीका है।

वर्तमान में, मैं केवल प्रत्येक भिन्न आकार के लिए एक छवि बना रहा हूं, लेकिन ऐसा करने के लिए यह कष्टप्रद है।

वहाँ वैसे भी CSS का उपयोग करके divs बना रहे हैं जो गोलाकार हैं और मैं त्रिज्या निर्दिष्ट कर सकता हूँ?

Comments

इसमें किन ब्राउज़र का समर्थन किया जाना चाहिए?

— ३:३०

इस संबंधित प्रश्न के मेरे उत्तर पर एक नज़र डालें, विशेष रूप से डेमो: stackoverflow.com/questions/4451350/…

— परिक्रमा

आप सर्कल बनाने के लिए SVG (VML) का भी उपयोग कर सकते हैं।

— जस्सनपेट

आप विभिन्न आकारों को बनाने के बजाय अपनी छवि की चौड़ाई और ऊंचाई का आकार क्यों नहीं बदल सकते? ये चित्र कितने बड़े हैं?

— Mottie

Answer 1

यहाँ एक डेमो है: http://jsfiddle.net/thirtydot/JJytE/1170/

सीएसएस:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

IE8 और पुराने में यह काम करने के लिए , आपको CSS3 PIE को डाउनलोड और उपयोग करना होगा । ऊपर मेरा डेमो IE8 में काम नहीं करेगा, लेकिन यह केवल इसलिए है क्योंकि jsFiddle होस्ट नहीं करता हैPIE.htc ।

मेरा डेमो इस तरह दिखता है:

Comments

मैं क्रोम में div गोलाकार नहीं बना सकता। यह मोज़िला में काम करता है। हालांकि, url chokate.maninactionscript.com/chokates रेगिस्तानी छवि पर क्लिक करता है या एक पिछले करने के लिए छवि के ज़ूमिंग पर दिखाए गए div परिपत्र नहीं है। मोज़िला में है।

— techie_28

@ techie_28: divआपके पृष्ठ पर वह दौर है, जिसे आप उदाहरण के border: 5px solid redलिए जोड़कर देख सकते हैं । समस्या यह है कि छवि के कुछ हिस्सों को "सर्कल को ओवरहांग" छिपाया नहीं जा रहा है। सामान्य वर्कअराउंड में से कोई भी विशेष रूप से यहां लागू करने के लिए आसान नहीं है .. मैं सुझाव देता हूं कि -webkit-mask-imageसंपत्ति का उपयोग करके WebKit ब्राउज़रों को ठीक करें (और अपने border-radiusब्राउज़र के लिए रखें )। अधिक यहाँ जानकारी: webkit.org/blog/181/css-masks । आप स्टैक ओवरफ्लो पर यहां एक प्रश्न पूछने पर विचार कर सकते हैं, यह देखने के लिए कि क्या किसी और के पास कोई अन्य विचार है।

— १५:०५

आप 999px के बजाय 100% भी कर सकते हैं।

— टोनी विकम

.htc अब समर्थित नहीं है।

— ओलिवर डिक्सन

मुझे आश्चर्य है कि गोल चक्कर के अंदर वस्तुओं (जैसे बटन) को कैसे संरेखित करें! : डी

— जिब्री

Answer 2

किसी तत्व के प्रत्येक पक्ष की सीमा-त्रिज्या को 50% तक सेट करने से किसी भी आकार में वृत्त प्रदर्शन निर्मित होगा:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

Comments

यह संभवतः वह विधि है जिसका उपयोग अब (2017 में) किया जाना चाहिए।

— स्क्रिप्बलमैकर

Answer 3

इसे इस्तेमाल करे

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

Answer 4

यह वास्तव में संभव है।

देखें: सीएसएस टिप: चित्र के बिना मंडलियां बनाने के लिए । डेमो देखें ।

लेकिन चेतावनी दी है, यह मूल रूप से अनुकूलता के मामले में गंभीर नुकसान है, आप एक बिल्ली की छाल बना रहे हैं।

इसे यहां काम करते हुए देखें

आप आपने अभी सेट करने के लिए है देखेंगे के रूप में heightऔर widthके लिए आधाborder-radius

सौभाग्य!

Comments

नमस्ते, आपके jsfiddleलिंक के लिए धन्यवाद ! यह लिंक अभी के लिए आपके उत्तर से काम कर रहा है। ;)

— 7

Answer 5

एक वृत्त बनाने के लिए कई (20+) क्षैतिज या लंबवत 1px div का उपयोग करते हुए [बुरा विचार] भी है। यह jQuery प्लगइन विभिन्न आकृतियों के निर्माण के लिए इस पद्धति का उपयोग करता है।

Answer 6

आकार के आधार पर चौड़ाई और ऊंचाई दें लेकिन, दोनों को बराबर रखें

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

<div class="circle">
</div>

Comments

border-radius: 50%;पर्याप्त है।

— मैटलएल्ग्रो

Answer 7

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

बस एक और समाधान का उल्लेख करना चाहता था जो "छवि का उपयोग करने की तुलना में सर्कल div बनाने का आसान तरीका" के प्रश्न का उत्तर देता है? जो FontAwesome का उपयोग करना है।

आप फॉन्टवॉस सीएसएस फ़ाइल या सीडीएन से आयात करें

और फिर आप बस:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

और आप इसे किसी भी रंग दे सकते हैं जिसे आप किसी भी आकार का चाहते हैं।

Answer 8

आप radial-gradientसीएसएस समारोह की कोशिश कर सकते हैं :

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

इसे एक divपरत पर लागू करें :

<div class="circle"></div>

Answer 9

मान लीजिए कि आपकी यह छवि है:

इसमें से एक वृत्त बनाने के लिए आपको केवल जोड़ना होगा

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

तो अगर आपके पास एक div है तो आप वही काम कर सकते हैं।

नीचे दिए गए उदाहरण की जाँच करें:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

Answer 10

आप त्रिज्या का उपयोग कर सकते हैं लेकिन यह IE पर काम नहीं करेगा border-radius: 5px 5px;:।

Answer 11

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}

<div class="circle"></div>

Answer 12

मूल रूप से यह दिए गए निर्देशांक पर एक चरित्र रखने के लिए div की स्थिति का उपयोग करता है। इसलिए एक सर्कल के लिए पैरामीट्रिक समीकरण का उपयोग करके, आप एक सर्कल बना सकते हैं। यदि आप रिश्तेदार के लिए div की स्थिति को बदलने के लिए थे, यह एक साइन लहर में परिणाम होगा ...

संक्षेप में हम स्थिति संपत्ति का दुरुपयोग करके समीकरणों को रेखांकन कर रहे हैं। मैं सीएसएस में अच्छी तरह से वाकिफ नहीं हूं, इसलिए कोई निश्चित रूप से इसे और अधिक सुरुचिपूर्ण बना सकता है। का आनंद लें।

यह सभी ब्राउज़रों और मोबाइल उपकरणों (जो मुझे पता है) पर काम करता है। मैं अपनी वेबसाइट पर इसका उपयोग पाठ की साइन तरंगों (www.cpixel.com) को आकर्षित करने के लिए करता हूं। इस कोड का मूल स्रोत यहां पाया गया है: www.mathopenref.com/coordcirclealealm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

Comments

इस मैं क्या चाहते है, लेकिन जैसा कि यहाँ दिखाया पैनल के भीतर हलकों हलकों के बीच उचित दूरी बनाए रखने के शो की सूची पर यह संभव है plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview

— Jinna बालू

Answer 13

की cssसंपत्ति जोड़ना :

border-radius: 50%;

किसी भी div के लिए यह परिपत्र है।

Answer 14

सर्कल के लिए, एक दिव्य तत्व बनाएं और फिर चौड़ाई = सीमा त्रिज्या के 2 बार = 2 बार पैडिंग करें। इसके अलावा लाइन-ऊंचाई = 0 उदाहरण के लिए, सर्कल के त्रिज्या के रूप में 50px के साथ, नीचे दिया गया कोड अच्छी तरह से काम करता है:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;