เป็นวิธีที่ง่ายกว่าในการสร้าง div div แทนที่จะใช้รูปภาพ?

ฉันสงสัยว่าถ้ามีวิธีสร้าง divs แบบวงกลมง่ายกว่าที่ฉันทำอยู่ตอนนี้

ขณะนี้ฉันกำลังสร้างภาพสำหรับแต่ละขนาดแตกต่างกัน แต่มันน่ารำคาญที่จะทำเช่นนี้

อย่างไรก็ตามมีการใช้ CSS เพื่อทำให้ div ซึ่งเป็นวงกลมและฉันสามารถระบุรัศมีได้หรือไม่

นี่คือตัวอย่าง: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.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 พาย สาธิตของฉันข้างต้นจะไม่ทำงานใน IE8 แต่ที่เพียงเพราะ jsFiddle PIE.htcไม่ได้เป็นเจ้าภาพ

การสาธิตของฉันมีลักษณะเช่นนี้:

การตั้งค่ารัศมีเส้นขอบของแต่ละด้านขององค์ประกอบเป็น 50% จะสร้างการแสดงวงกลมในทุกขนาด:

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

ลองสิ่งนี้

.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;
   }

เป็นไปได้จริง

ดู: CSS เคล็ดลับ: วิธีการสร้างกลุ่มโดยไม่ต้องแสดง ดูการสาธิต

แต่ควรระวังมันมีข้อเสียอย่างร้ายแรงในแง่ของความเข้ากันได้โดยทั่วไปคุณกำลังทำเห่าแมว

เห็นมันทำงาน ที่นี่

ในขณะที่คุณจะเห็นคุณเพียงแค่ต้องตั้งค่าheightและwidthครึ่งหนึ่งborder-radius

โชคดี!

นอกจากนี้ยังมี [ความคิดที่ไม่ดี] ให้ใช้ div (แนวนอนหรือแนวตั้งขนาด 1px) จำนวนมาก (20+) เพื่อสร้างวงกลม ปลั๊กอิน jQueryนี้ใช้วิธีนี้เพื่อสร้างรูปร่างที่แตกต่าง

ให้ความกว้างและความสูงขึ้นอยู่กับขนาด แต่ให้ทั้งสองเท่ากัน

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

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

.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

คุณนำเข้าไฟล์ css fontawesome หรือจาก CDN ที่นี่

แล้วคุณก็:

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

และคุณสามารถให้สีที่คุณต้องการได้ทุกขนาดตัวอักษร

คุณสามารถลองใช้radial-gradientฟังก์ชั่น CSS:

.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>

สมมติว่าคุณมีภาพนี้:

ในการสร้างแวดวงจากสิ่งนี้คุณต้องเพิ่มเท่านั้น

.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>

คุณสามารถใช้รัศมี แต่มันจะไม่ทำงานใน border-radius: 5px 5px;IE:

โดยพื้นฐานแล้วสิ่งนี้ใช้ตำแหน่งของ div เพื่อวางตัวอักษรในพิกัดที่กำหนด ดังนั้นการใช้สมการพารามิเตอร์สำหรับวงกลมคุณสามารถวาดวงกลม หากคุณต้องเปลี่ยนตำแหน่งของ div เป็นญาติมันจะส่งผลให้เกิดคลื่นไซน์ ...

ในสาระสำคัญเรากำลังสร้างสมการกราฟโดยใช้คุณสมบัติตำแหน่งที่ไม่เหมาะสม ฉันไม่เชี่ยวชาญใน css ดังนั้นบางคนก็สามารถทำให้สิ่งนี้สวยงามยิ่งขึ้นได้ สนุก.

สิ่งนี้ใช้ได้กับเบราว์เซอร์และอุปกรณ์มือถือทั้งหมด (ที่ฉันรู้) ฉันใช้มันในเว็บไซต์ของฉันเองเพื่อวาดรูปคลื่นไซน์ (www.cpixel.com) แหล่งที่มาดั้งเดิมของรหัสนี้พบได้ที่นี่: www.mathopenref.com/coordcirclealgorithm.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>

การเพิ่มcssคุณสมบัติของ:

border-radius: 50%;

เพื่อ div ใด ๆ ทำให้มันเป็นวงกลม

สำหรับวงกลมให้สร้างองค์ประกอบ div แล้วป้อน width = 2 เท่าของรัศมีชายแดน = 2 คูณระยะห่าง นอกจากนี้ line-height = 0 ตัวอย่างเช่นด้วย 50px เป็นรัศมีของวงกลมรหัสด้านล่างทำงานได้ดี:

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