كيف أقوم بإنشاء دائرة أو مربع مع CSS فقط - مع مركز جوفاء؟

Question

يجب أن يكون مجرد مخطط تفصيلي للمربع أو الدائرة - يمكنني أن أقوم به وفقًا لذلك (أي تغيير اللون إلى كل ما أريد ، وتغيير سمك الحدود ، وما إلى ذلك)

أرغب في تطبيق تلك الدائرة أو المربعة على شيء آخر (مثل صورة أو شيء ما) ويجب أن يتم تجويف الجزء الأوسط ، حتى تتمكن من رؤية الصورة أسفل المربع أو الدائرة.

أنا أفضل أن تكون بشكل أساسي CSS + HTML.

Answer 1

جرب هذا

div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}

<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

المزيد هنا

Answer 2

يمكنك استخدام أحرف خاصة لصنع الكثير من الأشكال. أمثلة:http://jsfiddle.net/martlark/jwh2n/2/

<table>
  <tr>
    <td>hollow square</td>
    <td>&#9633;</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>&#3664;</td>
  </tr>

</table>

يمكن العثور على الكثير هنا: HTML الشخصيات الخاصة

Answer 3

لا أعرف حل CSS (2.1 قياسي)-فقط للدوائر ، ولكن بالنسبة للمربعات يمكنك القيام بها بسهولة:

.squared {
    border: 2x solid black;
}

ثم ، استخدم رمز HTML التالي:

<img src="…" alt="an image " class="squared" />

Answer 4

إذا كنت تريد أن تحافظ DIV على شكلها الدائري حتى إذا قمت بتغيير عرضه/الارتفاع (باستخدام JS على سبيل المثال) ، قم بتعيين نصف القطر إلى 50 ٪. مثال: CSS:

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

لغة البرمجة:

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

Answer 5

وقت الدائرة! :) طريقة سهلة لصنع دائرة مع مركز جوفاء: استخدم الحدود الحدودية ، وإعطاء العنصر حدود ولا خلفية حتى تتمكن من رؤيته:

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}

<div></div>

Answer 6

على حد علمي ، لا توجد طريقة متوافقة مع المتصفح لإنشاء دائرة مع CSS & HTML فقط.

بالنسبة للمربع ، أعتقد أنه يمكنك صنع Div مع حدود و Z-index أعلى مما تضعه. لا أفهم لماذا ستحتاج إلى القيام بذلك ، عندما يمكنك وضع حدود على الصورة أو "شيء ما" نفسه.

إذا كان أي شخص آخر يعرف كيفية صنع دائرة تتوافق مع المتصفح المتقاطع مع CSS & HTML فقط ، فأنا أحب أن أسمع عنها!

لا يعمل Caspar Kleijne الحدود الحدودية في IE8 أو أدناه ، لست متأكدًا من حوالي 9.

Answer 7

بعد فترة وجيزة من العثور على هذه الأسئلة ، وجدت هذه الأمثلة على حيل CSS: http://css-tricks.com/examples/shapesofcss/

نسخ حتى لا تضطر إلى النقر

.square {
  width: 100px;
  height: 100px;
  background: red;
}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

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

هناك العديد من أمثلة الشكل الأخرى في الرابط أعلاه ، ولكن سيتعين عليك اختبار توافق المتصفح.